Question

我正在试图弄清楚如何将最初的背景图像（背景尺寸：封面）固定（图像上的文字在图像保持放置时滚动），但是，当用户滚动时直到内容的结尾（就像一个高大的文本块），背景然后向上滚动，在下面显示一个新的部分/ div。

例如：

<section id="top-section-with-fixed-bg">
   <div class="tall-content-1500px">
      <p>Text that's really tall</p>
   </div>
</section>

<section id="next-section">
   ...
</section>

但是，再次，背景图像是固定的，直到用户向下滚动1500px并完成该部分/ div的内容。此时，用户继续滚动并且背景图像向上滚动。

与视差解决方案一样，下一部分将覆盖背景图像。但背景图像随着滚动而上升。

我认为这需要一些javascript，jQuery修复，但我仍然有点新手。我是一名设计师，只是想让一个网站以某种方式看待和行动。我猜我必须认识到内容的高度，在哪里结束，然后要么告诉CSS从固定切换到滚动（不影响图像的位置），要么让js将图像向上移动滚动动作。

更新：这是一起快速抛出jsfiddle

更新更新：我想我找到了解决方案！

这里有回应中提供的指针，然后是一些挖掘，我有点工作。

我开始尝试弄清楚如何检测窗口高度。我将其插入文本/内容DIV，使用该值作为DIVs高度。这很重要，将文本的容器设置为用户窗口的高度，而不是特定的高度。然后，我将DIV设置为溢出：自动（并隐藏滚动条，以获得美观）。这允许我设置一个触发器，以便当达到该DIV中内容的结尾时，背景附件从固定更改为滚动。

而且，瞧！它并不完美，而且我确信一些真正的javascript / jQuery专家会纠正我的错误，但我喜欢到目前为止我已经有多远了。

我意识到从固定到滚动的swtich可能是不必要的。此时，当切换发生时，图像会稍微跳转以调整窗口大小及其自身位置，现在设置为滚动。如果我最初将CSS设置为固定，并确保DIV的内容（明智地使用填充）覆盖窗口，当用户使用鼠标滚动时将发生正确的操作：文本滚动直到没有更多文本，然后图像向上滚动。

查看并期待帮助和评论。

jsfiddle

Answer 1

你设置了background-attachment:fixed;吗？这使得背景图像随着浏览器滚动而“移动”。在设备方面要小心，因为这种方法会导致“看起来很滞后的网站”，因为设备渲染太多（取决于图像）。

我个人以'大'和'现代'浏览器为目标：

@media query and (max-width:600px){
    .top-section-with-fixed-bg{background-attachment:fixed;}
}

编辑：

抱歉，我没有完全理解这个问题。这里有一些CSS让你去

window.addEventListener('scroll',function(){
    //document.body.scrollTop would be the windows scroll position.
    if(document.body.scrollTop==1500px)
            document.getElementById('top-section-with-fixed-bg').style.backgroundAttachment='static';
    }else document.getElementById('top-section-with-fixed-bg').style.backgroundAttachment='fixed';
});

我很抱歉，但这是非常基本的。我即将完成工作。这个函数可以使用一点点修饰，就像让它变得动态一样。这也只是本机JS。所以这并不是那么花哨但你明白了。当document.body.scrollTop位于元素的底部时。我猜这是1500px高吗？如果不使用offsetHeight（）。这将给你完整的元素高度，包括填充和边距，我认为边界也是如此？

Answer 2

我将你的背景图像设置为background-position：fixed;然后将下一个背景图像放在文本的底部，使其覆盖在第一个div的顶部。问题是你不能拥有以前的漂亮<section>结构。

<style type="text/css">
.section-with-fixed-bg {
   min-height: 100%;
   background-size: cover;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-position: center center;
}

#bg-1 {
   background-image: url("./background-1.jpg");
}

#bg-2 {
   background-image: url("./background-2.jpg");
}

#bg-2 {
   background-image: url("./background-3.jpg");
}
</style>
...
<body>
<div id="bg-1" class="section-with-fixed-bg">
   <p>Text that's really tall</p>
   <div id="bg-2" class="section-with-fixed-bg">
      <p>Next section of text that's really tall.</p>
      <div id="bg-3" class="section-with-fixed-bg">
         <p>Next section of text that's really tall.</p>
      </div>
   </div>
</div>

我没有对此进行测试，但它应该导致新图像与旧图像重叠，至少在理论上是这样。

最初固定的完整背景图像，然后在DIV内容结束时滚动

2 个答案: