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

Question

我正在尝试弄清楚如何在最初固定一个完整的背景图像(背景大小:封面)(图像上的文本滚动而图像保持不变)，但是，在用户滚动的那一刻向下到内容的末尾(如一个高大的文本 block )，然后背景向上滚动显示下面的新部分/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>

但是，在用户向下滚动 1500 像素并且该部分/div 的内容完成之前，背景图像是固定的。此时，用户继续滚动并且背景图像向上滚动。

不像视差解决方案，下一节将介绍背景图像。但是背景图像会随着滚动而上升。

我认为这需要一些 javascript、jQuery 修复，但我对它还是有点新手。我是一名设计师，只是想让网站以这种特定的方式进行外观和操作。我猜我必须识别内容的高度，它在哪里结束，然后告诉 CSS 从固定切换到滚动(不影响图像的位置)，或者让 js 将图像向上移动滚动 Action 。

更新:这是一个快速组合在一起的 jsfiddle

更新更新:我想我找到了解决方案!

根据此处回复中提供的指示，然后进行一些挖掘，我已经开始工作了。

我开始尝试弄清楚如何检测窗口高度。我将其插入文本/内容 DIV，使用该值作为 DIV 高度。这很重要，将文本容器设置为用户窗口的高度，而不是特定高度。然后，我将该 DIV 设置为 overflow: auto(为了美观隐藏滚动条)。这让我可以设置一个触发器，以便在到达该 DIV 中的内容末尾时，背景附件从固定更改为滚动。

而且，瞧!它并不完美，我相信一些真正的 javascript/jQuery 专家会纠正我的错误，但我喜欢到目前为止我在这方面取得的进展。

我意识到从固定到滚动的切换可能是不必要的。目前，当切换发生时，图像会跳动一点以适应窗口大小和它自己的位置，现在设置为滚动。如果我最初将 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()。这将为您提供元素的完整高度，包括填充和边距，我认为边框也是如此？