Geek Answers Handbook

Why is my jQuery running slow?

I am extremely new to jQuery, I just started learning it today. I searched all around, because of which this code may not work. When you scroll down, I want h1 to move to the side and the menu button appears. It works, but when I scroll back again, it takes a very long time to undo itself. I tried to fix everything that could cause it as a delay or something like that, but as far as I can see, there are no problems. Link to the site: 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; }
+5
source share
1 answer

The main problem that I could see with the code is how the scroll is handled, for each scroll event you add a 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; } }); });
+4
source

More articles:


All Articles