0

我正在尝试在网站上实现视差滚动效果（使用Smashing Magazine 中的本教程）。视差效果运行良好，但我需要让其中一个精灵在到达某个点时停止滚动。默认情况下，它会继续滚动，直到看不见为止。

视差效果通过动画元素的背景位置来工作。我正在尝试使用以下代码获取动态背景位置：

jQuery(function($) {

            var elem = $("#heart-box");

            var backgroundPos = $(elem).css("backgroundPosition").split(" ");

            var xPos = backgroundPos[0],
                yPos = backgroundPos[1];

            $(window).scroll(function() {

                console.log(yPos);

                if ( yPos >= 210 ) {
                    $(elem).hide();
                }
            });

        });

相反，仅返回起始位置，如 CSS 中定义的那样，并且在页面滚动时不会在控制台日志中更改。

当页面滚动时，背景 Y 位置会动态改变 - 其范围大约是 -200px 开始，到 400px 结束。当背景 Y 位置达到 210px 时，我希望元素具有 210px 的固定背景位置，而不是一直滚动。

任何帮助都会很棒。谢谢。

4

1 回答 1

3

返回初始值，因为在回调yPos之外设置为 backgroundPosition 的值。scroll在 Javascript 中，只有对象通过引用传递，因此当您从更改中检索到的 CSS 属性时，您的backgroundPos,yPos和xPos变量（在这种情况下是原始类型 - 字符串）不会更改；它们具有最初分配的值，因为您从未重新分配它们。

要使这项工作按您的预期进行，您需要在scroll回调中检索当前背景位置。

$(window).scroll(function() {

    var backgroundPos = $(elem).css("backgroundPosition").split(" ");
    var xPos = backgroundPos[0],
        yPos = backgroundPos[1];

    console.log(yPos);

    if ( yPos >= 210 ) {
        $(elem).hide();
    }

});

为了稍微提高效率，您可以将结果分配给$(elem)滚动回调之外的变量，以便不会在每个滚动事件上调用选择器（如果您使用字符串作为选择器则更相关）：

var elem = $(elem);
...
elem.css("backgroundPosition").split(" ");
于 2013-04-05T09:44:37.527 回答