如何根据滚动条移动来移动 DIV 的背景图像？

Question

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

据我所见，大多数视差效果都假设您希望能够在许多背景图像滚动或大量重复图像的情况下无限滚动。

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

请看下图，了解我希望达到的效果：

视口的高度将根据内部 DIV 内的内容长度而有所不同。

我的麻烦是，如果我想要做的不是完全视差效果，那么我不知道还能怎么称呼它，而且我尝试通过描述它进行搜索时，总是让我回到提供关于视差效果。所以我一直被缺乏术语所困扰。

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

---

更新：

使用 cmets 中提供的术语进行搜索后，我在外部 DIV 中获得了背景图像，几乎可以使用以下代码执行我想要的操作：

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

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

Answer 1

根据您的要求，您必须使用 jquery 视差插件 来指导此活动，我最好建议它使用 Superscollorama 并根据需要使用元素... p>

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

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
);

你的连环恶习随心所欲地改变......

试试这个插件，希望对你有用...

http://johnpolacek.github.io/superscrollorama/

谢谢...

Answer 2

事实证明，我想要实现的目标无需特殊插件，只需经过深思熟虑的数学运算即可。我确实使用了一点 jQuery 语法，但我认为这不是绝对必要的。

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

我在这里所做的只是为了我在问题中描述的“外部 DIV”。要使背景像我描述的“内部 DIV”那样移动，您必须修改代码，大概是通过反转一些参数。我还没有这样做，但这似乎是一项简单的任务。

希望其他人发现此代码有用。如果有人对如何提高效率或更好提出建议，请告诉我。

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();
});