scrollTop get each pixel

Vote count:

0

When I use the function scrollTop to get the amount of pixels of the top I receive 1, 4, 20,... depending on the speed that I am scrolling.

$(window).scroll(function(){
    var position = $(document).scrollTop();
    console.log(position);
)};

I am building a site were I need to get each pixel. This because I am checking when a certain position-value is showing. For example:

if(position === 1200){
    // do something
}

Now this is not possible with the values I receive of the scrollTop function. Now I'am using this code below which make it possible to calculate each pixel, but this is only working smooth when the site is not to heigh. If the site is more then 3000px of height, it will begin to jitter because it takes to lang to calculate the pixel.

var viewportFirstPosition = $(document).scrollTop();
$(window).scroll(function(){
    var inc;

    var viewportHeight = $(window).height();
    var viewportNewPosition = $(document).scrollTop();

    if(viewportNewPosition > viewportFirstPosition){
       inc=1;
    }
    else{
       inc=-1;
    }

    while(viewportFirstPosition !== viewportNewPosition){
        viewportFirstPosition += inc;
        console.log(viewportFirstPosition); // 1, 2, 3, 4, 5, ...
    }
}

Any ideas how I can do it differently? Without the jitter :) Thanks!

asked 1 min ago

Rein Van Leirsberghe

51

scrollTop get each pixel