2

我正在创建一个简单的视差滚动器，它将图像缩放到屏幕宽度，设置一个设置为所有图像的缩放高度的滚动包装器，并查看 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 语句正确设置。

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

4

3 回答 3

1

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

var wp = parseInt($(this).attr('data-waypoint'),10);
于 2013-01-16T01:02:22.360 回答
0

我的猜测是，不知何故wp没有加载预期值——这里没有太多空间让其他任何事情出错。

您确定 wp 正在拉动您期望的价值吗？元素的data-waypoint属性是如何设置的——也许这就是罪魁祸首？

如果没有，您能否给我们提供示例值，说明您希望设置 top 的值以及实际设置的值？

于 2013-01-15T23:02:42.837 回答
0

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

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

requestAnimationFrame(positionSlides);
于 2013-01-15T23:02:43.327 回答