Javascript 如何基于滚动条移动来移动DIV的背景图像？

我一直在寻找网页上的垂直滚动，经过一些研究，我不确定我想要做的是技术上的视差效果

从我所看到的，大多数视差效果假设你希望能够无限滚动许多背景图像，或与巨大的图像重复

我想做的是，当滚动条到达页面底部时，用背景图像填充两个div的背景请注意，我不希望背景图像拉伸。我假设这些图像的垂直高度大于大多数人的视口，然后它们的垂直位置会改变，以获得我想要的效果。当用户的滚动条位于顶部时，可以看到一定数量的背景，然后在用户向下滚动时，滚动条垂直移动以填充背景空间

请参见下图，了解我希望实现的效果的视觉解释：

veiwport的高度将根据内部分区内内容的长度而变化

我的问题是，如果我试图做的不完全是视差效果，那么我不知道该怎么称呼它，而我试图通过描述它来搜索，这让我回到提供视差效果教程的页面。所以我被术语的缺乏难倒了

如果有人能告诉我如何根据滚动条的位置控制背景的垂直位置，我将不胜感激。如果只用CSS就可以做到这一点，那就太好了，但我假设需要一些Javascript。jQuery解决方案也适用于我

---

更新：

在使用注释中提供的术语进行搜索后，我在外部DIV中获得了背景图像，几乎可以使用以下代码实现我想要的功能：

$(window).scroll(function () {
var yPos = $("#outerDiv").height() - ($("#outerDIV").height() * ($(window).scrollTop() / $(window).height()));
document.getElementById('outerDIV').style.backgroundPosition="0px " + yPos + "px";
});

---

它相对于滚动沿正确的方向移动背景图像，但缺少的是将该运动限制在视口内。事实证明，根据视口和DIV大小获得正确的比例只是超出了我的数学能力。

根据您的要求，您必须使用jquery视差插件来指导此活动，我的最佳建议是使用a并按照您的意愿玩元素

至于你的问题，试试这个例子

controller.addTween(
    '#examples-background',
    (new TimelineLite())
    .append([
        TweenMax.fromTo($('#parallax-it-left'), 1, 
        {css:{backgroundPosition:"(0 -54px)"}, immediateRender:true}, 
        {css:{backgroundPosition:"(0 -54px)"}}),
        TweenMax.fromTo($('#parallax-it-right'), 1, 
        {css:{backgroundPosition:"(0 -54px)"}, immediateRender:true}, 
        {css:{backgroundPosition:"(0 54px)"}})
    ]),
1000 // scroll duration of tween
);

你想怎么换就怎么换

尝试实践这个插件，希望对你有用

---

谢谢…

事实证明，我想要实现的东西不需要特殊的插件，只需要一些经过深思熟虑的数学。我确实使用了一些jQuery语法，但我认为这并不是绝对必要的

下面的代码有丰富的注释，所以希望主要是解释性的。总之，您只需找到滚动条位于顶部时背景图像的位置，以及滚动条位于底部时背景图像的位置，然后您可以使用滚动条移动的百分比计算出这两点之间的位置。当然，这有点诡计多端，因为你必须考虑滚动条的总高度和你的DIV在页面上出现的位置之间的差异，以及一些其他调整，但我所做的细节如下

我在这里所做的只是为了我在问题中描述的“外部DIV”。为了让背景像我描述的“internaldiv”一样移动，您必须修改代码，可能需要反转一些参数。我还没有完成，但这似乎是一项简单的任务

希望其他人觉得这段代码有用。如果有人对如何使其更有效或更好有建议，请让我知道

function moveBG(){
   // imageHeight is not the total height of the image,
   // it's the vertical amount you want to ensure remains visible no matter what.
   var imageHeight = 300;
   // Get the maximum amount within the DIV that the BG can move vertically.
   var maxYPos = $("#outerDIV").height() - imageHeight;
   // Get the amount of vertical distance from the top of the document to
   // to the top of the DIV.
   var headerHeight = document.getElementById("outerDIV").offsetTop;
   // Calculate the BG Y position for when the scrollbar is at the very top.
   var bgTopPos = $(window).height() - headerHeight - imageHeight;
   // I don't want the image to wander outside of the DIV, so ensure it never
   // goes below zero.
   if (bgTopPos < 0)
   {
      bgTopPos = 0;
   }
   // Calculate the BG Y position when the scrollbar is at the very top.
   var bgBottomPos = $(document).height() - $(window).height() - headerHeight;
   // To prevent the BG image from getting cut off at the top, make sure
   // its position never exceeds the maximum distance from the top of the DIV.
   if (bgBottomPos > maxYPos)
   {
      bgBottomPos = maxYPos;
   }
   // Subtract the top position from the bottom, and you have the spread
   // the BG will travel.
   var totalYSpan = bgBottomPos - bgTopPos;
   // Get the scrollbar position as a "percentage". Note I simply left it as a 
   // value between 0 and 1 instead of converting to a "true" percentage between
   // 0 and 100, 'cause we don't need that in this situation.
   var scrollPercent = ($(window).scrollTop() / ( $(document).height() - $(window).height()));
   // The percentage of spread is added to the top position, and voila!
   // You have your Y position for the BG image.
   var bgYPos = bgTopPos + (Math.round(totalYSpan * scrollPercent));
   // Apply it to the DIV.
   document.getElementById('outerDIV').style.backgroundPosition="0px " + bgYPos + "px";
}
// Place the BG image correctly when opening the page.
$(document).ready(function() {
   moveBG();
});
// Make it update when the scrollbar moves.
$(window).scroll(function () {
   moveBG();
});

函数moveBG（）{
//imageHeight不是图像的总高度，
//这是您希望确保无论发生什么情况都保持可见的垂直量。
var图像高度=300；
//获取分区内BG可以垂直移动的最大数量。
var maxYPos=$（“#outerDIV”）.height（）-imageHeight；
//获取从文档顶部到目标的垂直距离
//坐到最上面。
var headerHeight=document.getElementById（“outerDIV”）.offsetTop；
//计算滚动条位于最顶端时的BG Y位置。
var bgTopPos=$（window）.height（）-headerHeight-imageHeight；
//我不希望图像在DIV之外徘徊，所以请确保它永远不会出现
//低于零。
如果（bgos<0）
{
bgos=0；
}
//当滚动条位于最顶端时，计算BG Y位置。
var bgBottomPos=$（文档）.height（）-$（窗口）.height（）-人头高度；
//要防止BG图像在顶部被切断，请确保
//其位置永远不会超过距离DIV顶部的最大距离。
如果（bgBottomPos>maxYPos）
{
bgBottomPos=maxYPos；
}
//从底部减去顶部位置，就得到了排列
//BG将旅行。
var totalYSpan=bgBottomPos-bgTopPos；
//以“百分比”的形式获取滚动条的位置。注意，我只是将其作为
//值介于0和1之间，而不是转换为介于
//0和100，因为在这种情况下我们不需要。
var scrollPercent=（$（窗口）.scrollTop（）/（$（文档）.height（）-$（窗口）.height（））；
//排列的百分比被添加到顶部位置，瞧！
//您有BG图像的Y位置。
var bgYPos=bgTopPos+（数学四舍五入（totalYSpan*scrollPercent））；
//将其应用于DIV。
document.getElementById（'outerDIV'）.style.backgroundPosition=“0px”+bgYPos+“px”；
}
//打开页面时正确放置BG图像。
$（文档）.ready（函数（）{
moveBG（）；
});
//使其在滚动条移动时更新。
$（窗口）。滚动（函数（）{
moveBG（）；
});

<