Parallax scrolling choppy

Question

I'm trying to get a nice parallax scrolling effect for my website, and as long as I scroll the page using scrollbar it seems nice. But when I use keyboard of mouse scroll wheel - it's really choppy and laggy. Here's a portion of JS that's responsible for the parallax.

$(window).scroll(function(){
    if($(document).scrollTop() > 600 && $(document).scrollTop() < 2500){
         var temp =  100 - ($(document).scrollTop() - 1200) / 8;
         var bonus = '50% ' + temp + '%';
         document.getElementById('div').style.backgroundPosition = bonus;
    }
}

Can someone tell me why is it choppy? I tried to resize the background-image to a smaller one, but that doesn't seem to be an issue here and therefore I'm seriously out of mana, don't know what I'm doing wrong. Any help would be appreciated.

Answer 1

i came across the same issue and found a neat trick to solve this. "The last developer" found out you have to fix the background position and work against the scrolling direction:

$(window).scroll(function(){
    if($(document).scrollTop() > 600 && $(document).scrollTop() < 2500){
         var temp =  100 - ($(document).scrollTop() - 1200) / 8;
         var bonus = '50% ' + temp*-1 + '%';
         document.getElementById('div').style.backgroundPosition = bonus;
    }
}

Use this css for your div

background-attachment: fixed;

This definetly feels a lot smoother to me. Source: The Last Developer