jQuery animate on window scroll: moving more object in parallel problem and unwanted delay on objects with fixed css position

Question

I want to move 4 objects of the DOM when a user scrolls the page.

you can check the page i'm talking about at this address:
http://www.tessuti-arredo.it/new/chi_siamo/rassegna/

as the user scrolls - i'm using $(window).scroll(function() - i check if the window.scrollTop is more than 10 pixels to move some objects. This seems to work fine. but on the ELSE statement (i mean when scrollTop is minor than 10 pixels) - and theese objects should move back to the original position - i have a strange behaviour, especially on two of the 4 objects i move (two fixed objects that i move together calling their class).

maybe it's a bit complicated to explain with my poor english, but if you have a look at the address i posted above it's quite easy to understand, just try to scroll the page.

The objects i want to move are: - a link (a) object contained inside the #header div = $("#header h1 a") - the left sidebar menu called with his id = $("#sidebar") - and two fixed divs, the main horizontal menu and his background, called by their class = $(".moveMenu")

One important last thing: with Firefox it seems to be ok, with all other browsers i have a variable delay that looks like some error on my code.

speaking about my code, here it is:

$(document).ready(function(){

    $(window).scroll(function(){
     if($(this).scrollTop() > 10) {
        $("#sidebar").stop().animate({top:'119px'}, 100, function (){   
                        // some callback
                    });

        $("#header h1 a").stop().animate({marginTop:'30px'}, 100, function (){
                        // some callback
                 });

         $(".moveMenu").stop().animate({top:'0'}, 300, function (){
               // here i change the class of fixed objects to call them back on else statement
                 $(this).removeClass('moveMenu').addClass('moveMenu2');
               });

        }else{  

            // this is happening with unwanted delay
            $(".moveMenu2").stop().animate({top:'90'}, 300, function (){
                    $(this).removeClass('moveMenu2').addClass('moveMenu');
                });

            $("#sidebar").stop().animate({top:'89px'}, 100, function (){
                        $(this).css({'padding-top' : '40px'}); 
                });

            $("#header h1 a").stop().animate({marginTop:'0px'}, 100, function (){
                            // some callback
                });
            }
    });

});

I know there are some empty callbacks, i just kept them to have it ready to fill with something, i tryed to delete them, nothing is changed.

another thing i tryed is to call the two delaying object with a specific id instead of class but nothing has gone better...

i really hope you will find some error in my coding, i know i'm not so good.

Answer 1

I only experience heavy lag in IE, and in Firefox its minimal and in Chrome (my default browser) there is no lag but the script will fail to animate completely if you scroll up and down very fast. The window.onscroll fires an incredible number of times while scrolling occurs - this is what creates the lag. There are a few attempts I tested to improve this issue, and basically they involve minimizing the number of operations that occur every time the event is fired:

1. I started by combining the two div elements 'mainmenubg' and 'mainmenu' into a single div with class 'moveMenu'. This improves efficiency by referencing and animating only one element through $('.moveMenu') and $('.moveMenu2').

2. I created three global javascript variables used to reference the objects during a scroll event. Every time you call $('something') a search occurs, but in this case the same objects are always referenced. This improves efficiency by removing the 'queries' from the event itself.

   var asidebar = $("#sidebar");
   var aheader = $("#header");
   var amenu = $(".moveMenu");
   

   Then in your external javascript file something like this for each animation call: amenu.stop().animate({top:'0'},300,function(){$(this).removeClass('moveMenu').addClass('moveMenu2');});

3. The last thing I noticed is that your animation calls occur regardless of whether or not your objects are already in place. For instance, the user scrolls down the page so the menu and header animate to their new locations. Well, once they are there, there is no reason to continue making animation calls while the user continues to scroll down. Instead, the next animation should only occur when the user reaches the 10px threshold and the objects need to relocate. One way to change this is by creating a global variable which can be used to determine if animations need to occur. For instance: var change = 0; Then in your external file add a nested if statement that tests the situation:

   if($(this).scrollTop() > 10){ if(change == 0){ ...animations... change = 1;}}

   else if( change == 1 ){ ...animations... change = 0;}

Generally, this is all about making your code more efficient.

ANSWERING YOUR SECOND QUESTION:

I'm not sure what you mean, because I am not experiencing this issue. Sorry!

Answer 2

I just want to comment Trevor's answer, but I do not have enough reputation to do it. so I use another answer. I hope it's not a problem.

Thank you very much Trevor, your advices solve a lot, many thanks for the time you spent helping me.

I tryed one thing more, inspired by your advices: I don't need any more to change class from movemenu to movemenu2, because the animations depends on the "change" variable and if that variable is set to 1 i can be pretty sure that the object is in the new location ready to move back. Furthermore I do not have to search DOM for the movemenu2 class on the ELSE statement (this was very laggy on low performance computers).

I have one last problem that I just figured out:

• if the user reload the page after have scrolled the objects are in the original position... but maybe this is too much hard to solve...