背景滚动，内容上下匹配

Background scrolling with content matching top and bottom?

本文关键字：上下 滚动 背景      更新时间：2023-09-26

我有一个页面有一个简单的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;
        });
    });
}

但这似乎对业绩产生了非常不利的影响。有什么方法可以让它反应更快吗？

CSS:

background-attachment: fixed;

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

这对我有效：

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;
    });
    */
});
}
相关文章：