Menu
I am extremely new to JQuery, I just started looking into it today. I have searched all around for what might be causing this bit of code to not work. When you scroll down, I want the h1 to move to the side and a menu button to appear. That works, but when I scroll back up again, it takes an extremely long time to reverse itself. I have tried to fine anything that might be causing it like a delay or something, but as far as I can see, there isn't any problems. Link to website: http://www.dragonmath.net/rockets
Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css" />
<title>Rockets</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<header>
<img id="menu" src="images/menu1.png" />
<div id="headerdiv">
<h1>Rockets</h1>
<img id="logo" src="images/logo1.png" />
</div>
</header>
<nav>
<ul>
<li>
<a>Space Race</a>
</li>
<li>
<a>SpaceX</a>
</li>
</ul>
</nav>
<script>
$( document ).ready(function() {
var $menu = $('img#menu');
var $headerdiv = $("div#headerdiv")
var $nav = $('nav');
$(window).on('scroll', function () {
if ($(window).scrollTop() > 40) {
$headerdiv.addClass("testheaderdiv");
$menu.delay(800).slideDown(800);
$nav.addClass('testnav');
}
if ($(window).scrollTop() < 40) {
$menu.slideUp(800, function () {
$headerdiv.removeClass('testheaderdiv');
});
$nav.removeClass('testnav');
}
});
});
</script>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
color: #00AAFF;
font-family: Arial;
}
body {
height: 800px;
}
header {
position: fixed;
top: 0px;
left: 0px;
height: 100px;
width: 100%;
background-color: #333;
z-index: 1;
}
div#headerdiv {
display: inline;
transition: all 1s;
}
h1 {
display: inline;
margin-left: 40px;
font-size: 40px;
}
header > img#menu {
position: fixed;
top: 20px;
left: 40px;
width: 40px;
height: 40px;
display: none;
}
header > div > img#logo {
display: inline;
width: 60px;
height: 60px;
position: relative;
top: 18px;
left: 20px;
transition: height 1s, width 1s;
}
nav {
position: relative;
top: 100px;
height: 40px;
width: 100%;
background-color: #333;
}
nav > ul {
list-style: none;
}
nav > ul > li {
display: inline-block;
height: 40px;
width: 200px;
text-align: center;
border-right: 1px solid #00AAFF;
}
nav > ul > li > a {
position: relative;
top: 6px;
}
.testheaderdiv {
margin-left: 80px;
transition: all 1s;
}
.testnav {
display: none;
}
523
The main problem I could see with the code is how scroll is handled, for every scroll event you are adding delay to the menu element.
So try
$(document).ready(function () {
var $menu = $('img#menu');
var $headerdiv = $("div#headerdiv")
var $nav = $('nav');
var flag;
$(window).on('scroll', function () {
if (flag !== 1 && $(window).scrollTop() > 40) {
$headerdiv.addClass("testheaderdiv");
$menu.stop(true, true).delay(800).slideDown(800);
$nav.addClass('testnav');
flag = 1;
}
if (flag !== 2 && $(window).scrollTop() < 40) {
$menu.stop(true, true).slideUp(800, function () {
$headerdiv.removeClass('testheaderdiv');
});
$nav.removeClass('testnav');
flag = 2;
}
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
