Question

我尝试编写视差效果，其中特定div的背景图像滚动比窗口稍慢。每个背景图像都绑定到具有id的特定元素。使用当前设置，当背景图像的位置更新时，窗口在元素可见时滚动。

但是，按照我设置的方式，当第一个元素进入视图时，带有背景图像的两个元素都会开始移动。我希望每个元素的背景图像仅在该特定元素在视图中时滚动。

$(document).ready(function() {



$(window).scroll(function() {

    var windowTop = $(window).scrollTop();

    var windowPosition = (windowTop + $(window).height());

$.each(['#background1', '#background2'], function(i, val) {
    var backgroundPosition = $(val).offset().top;   
    var backgroundBottom = backgroundPosition + 700;
    console.log(backgroundPosition);

    if (backgroundPosition < windowPosition && backgroundBottom > windowTop) {
        $(val).css('background-position', '0% ' + parseInt(-windowTop / 5 + 300) + 'px');
    }       
});




});

}）;

js fiddle：http://jsfiddle.net/zxkkr/

Answer 1

这应该可行，但您可能需要为视差提供更好的计算，因为视差计算应该相对于可见div。

这是工作小提琴：http://jsfiddle.net/zxkkr/5/

$(document).ready(function () {

    $(window).scroll(function () {

        $.each(['#background1', '#background2'], function (i, e) {

            if (isScrolledIntoView(e)) {

                var windowTop = $(window).scrollTop();
                var parallax = '-' + parseInt(windowTop / 5) + 'px';

                console.log(e, ' in view with parallax: ', parallax);

                $(e).css({
                    'background-position': '0px ' + parallax
                });
            }
        });

    });

});

function isScrolledIntoView(elem) {

    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    var topOfView = elemTop + docViewTop;


    if (docViewBottom >= elemTop && docViewTop <= elemBottom) {
        return true;
    } else {
        return false;
    }
}

Answer 2

谢谢4m1r。我得出了同样的结论，我的视差计算很不稳定。在我的jsfiddle中测试了它，它似乎工作：

$(document).ready(function() {



$(window).scroll(function() {

    var windowTop = $(window).scrollTop();

    var windowPosition = (windowTop + $(window).height());

$.each(['#background1', '#background2'], function(i, val) {
    var backgroundPosition = $(val).offset().top;   
    var backgroundBottom = backgroundPosition + 700;
    console.log(backgroundPosition);

    if (backgroundPosition < windowPosition && backgroundBottom > windowTop) {
        $(val).css('background-position', '0% ' + parseInt(-(windowTop - backgroundPosition) / 5) + 'px');
    }       
});




});

});

使用jquery中的$ .each通过id定位元素

2 个答案: