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);