Question

我正在尝试在网站上实现视差滚动效果（使用Smashing Magazine中的this tutorial）。视差效果工作正常，但我需要让其中一个精灵在到达某一点时停止滚动。默认情况下，它会继续滚动，直到它不在视图中。

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

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的固定背景位置，而不是保持滚动。

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

Answer 1

返回初始值，因为yPos设置为scroll回调之外的backgroundPosition值。在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(" ");

使用jQuery获取动态背景位置

1 个答案: