jQuery css（）无法在条件语句中工作

Question

I am creating a simple parallax scroller that scales images to the screen width, sets a scrolling wrapper that is set to the scaled height of all the images, and looks at the scrollTop value to set top position of the images using jQuery's css(). Here is the main function:

function positionSlides() {
    sT = $(window).scrollTop();
    $('div.slide img').each(function(){
        wp = $(this).attr('data-waypoint');
        if(sT >= wp){
            $(this).css({'top' : wp, 'border' : '1px solid red'});
            //console.log(sT + ':sT, ' + wp + ':wp');
        }
        else{
            $(this).css({'top' : ((wp-sT)/4)+sT, 'border' : '1px solid blue'});
        }
    });
}

The setting of the border colors is there to test which conditional statement is passing.

positionSlides() is called on scroll via

$(window).scroll(function(){
    positionSlides();
});

My problem is when sT >= wp , the css property 'top' is not set to the value of wp . It is set to what seems to be the last value passed by the else statement, which is some value slightly less than wp . But at the same time, 'border' : '1px solid red' is set correctly via the same if statement.

Why is the 'top' property not set in the if part of the statement?

Answer 1

The first time you work with wp where it isn't working it is a string. The second time, it is an integer or float when you do wp-sT . if you convert the first version to a numeric value it will work.

var wp = parseInt($(this).attr('data-waypoint'),10);

Answer 2

My guess would be that somehow wp isn't getting loaded with the expected value - not much room for anything else to go wrong here.

Are you sure wp is pulling the value you expect? How is the element's data-waypoint attribute being set - maybe that's the culprit?

If not, can you give us example values of what you expect top to be set to, and what it actually gets set to?

Answer 3

Your problem is that you're firing this on every single scroll event. Which is a lot. Check out this article on HTML5Rocks.com. It basically suggests using requestAnimationFrame() and checking the position each time instead of doing it on a scroll event.

In your case, you could just change your code to

requestAnimationFrame(positionSlides);