Question

我正在创建一个简单的视差滚动条，可以将图像缩放到屏幕宽度，设置一个滚动包装器，设置为所有图像的缩放高度，并查看scrollTop值以使用jQuery的css设置图像的顶部位置（）。这是主要功能：

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

边框颜色的设置用于测试传递的条件语句。

通过

滚动调用positionSlides（）

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

我的问题是在sT >= wp时，css属性“top”未设置为wp的值。它被设置为似乎是else语句传递的最后一个值，这个值稍微小于wp。但与此同时，'border' : '1px solid red'通过相同的if语句正确设置。

为什么'top'属性没有在语句的if部分设置？

Answer 1

第一次使用wp时，它不起作用，它是一个字符串。第二次，当你wp-sT时，它是一个整数或浮点数。如果您将第一个版本转换为数字值，它将起作用。

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

Answer 2

我的猜测是，某种程度上wp没有达到预期的价值 - 这里没有其他任何错误的空间。

你确定wp正在拉动你期望的价值吗？如何设置元素的data-waypoint属性 - 这可能是罪魁祸首？

如果没有，您能否举例说明您希望设置的最佳值，以及实际设置的值？

Answer 3

你的问题是你在每一个滚动事件上都会触发它。这是很多。查看HTML5Rocks.com上的this article。它基本上建议使用requestAnimationFrame()并每次检查位置，而不是在滚动事件上执行。

在您的情况下，您可以将代码更改为

requestAnimationFrame(positionSlides);

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

3 个答案: