Slow Scroll Jittery

I am using this code: EXAMPLE Depending on if 'image-ul' is fully above the bottom edge of the browser window or not, will make divs scroll at different speeds, as it should. But t

Solution 1:

The sample code wasn't slow for me, so it may be specific to your machine or browser.

However, there are a few things you can do:

1. Don't use jQuery where you don't need it. jQuery is significantly slower than using native JS functions (e.g. document.getElementById).

2. Don't repeatedly use jQuery selectors. Every time you use a jQuery selector, you suffer a performance hit. So for example, instead of this:

   function(){
       varDiv_one_top = $('#image-ul').offset().top,
       Div_one_height = $('#image-ul').outerHeight(true);
   }
   

Do this:

var imageUl = $('#image-ul');
function(){
     imageUl.offset().top,
     imageUl.outerHeight(true);
}

This example should increase performance quite a bit. You're doing multiple jQuery selectors every time the page scrolls for no reason.

The best choice for something performance intensive is to cut out jQuery completely and do it by hand.