Question

我有一个简单的div页面。如果div位于页面顶部，则背景图像（非常长的垂直壁纸）也应仅显示顶部。如果我们一直向下滚动，那么在底部的最后一个区域，将显示背景的底部。效果是，它就像一个视差，内容和背景图像的滚动串联发生并相互缩放。

我该怎么做？

更新：我的尝试是这样的：

function setupMainContent(){
    $("#programming").delay(1000).fadeIn(1000, function(){
        $(window).scroll(function(){
            var current = $(window).scrollTop();
            var bottom = $(document).height() - $(window).height();
            var scale = 100*(current/bottom);
            $('body').css({
                'background-position':scale+'%'
            });
        });
}

但我真的不知道如何使用引号内的变量。

更新：我使用它开始工作：

function setupMainContent(){
    $("#programming").delay(1000).fadeIn(1000, function(){
        $(window).scroll(function(){
            var current = $(window).scrollTop();
            var bottom = $(document).height() - $(window).height();
            var scale = 100*(current/bottom) + "%";
            document.body.style.backgroundPosition = "center " + scale;
        });
    });
}

但是对性能的影响似乎非常严重。有没有什么方法可以让它更快，更快？

Answer 1

CSS：

background-attachment: fixed;

https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

Answer 2

这对我有用：

function setupMainContent(){
$("#programming").delay(1000).fadeIn(1000, function(){
    $(window).scroll(function(){
        var current = $(window).scrollTop();
        var bottom = $(document).height() - $(window).height();
        var scale = 100*(current/bottom) + "%";
        document.body.style.backgroundPosition = "center " + scale;
    });
    */
});
}

内容匹配顶部和底部的背景滚动？

2 个答案: