隐藏固定透明标题下的滚动内容，滚动背景

Posted 2023-05-08

【中文标题】隐藏固定透明标题下的滚动内容，滚动背景

【英文标题】：Hide scrolling content under fixed transparent header, scroll background

【发布时间】：2012-07-02 12:10:40

【问题描述】：

假设我有一个背景图像，一个带有透明部分的固定标题图像，一个具有半透明背景的内容 div 和传统页眉/内容/页脚布局中的动态高度。

我想要达到的效果：在固定标题下滚动背景和内容（隐藏内容并显示背景）。

我已经阅读了很多相关的主题，例如 Hide Scrolling Content Under Transparent Header 等。但他们处理的背景也可以固定。我的必须是可滚动的。

我设法通过将相同的背景图像添加到标题图像 div 的包装器 div 并在窗口滚动事件上使用 jQuery .scrollTop() 滚动它来获得所需的内容。

参考：jsbin Example 参考：jsFiddle Example

这种方法的问题是在所有非名为 Firefox 的浏览器中同步非常糟糕（有些滞后、撕裂）。

澄清一下：内容的高度是动态的。 10000px 我刚刚选择了这个例子。不过，我希望它经常达到这个目标，有时甚至更多（AJAX 提要），并且在某些页面上它可能接近0。这也是我同步.height() 的原因。请记住，底部的 footer div 位于 content div 之下。

而且我认为 必须有更好的方法。有什么建议吗？

【问题讨论】：

看看$('#header').animate(scrollTop: s, 0);在IE和其他方面的性能是否更好，我无法测试。

@AlexBall 谢谢建议，试过了，结果好像和$('#header').scrollTop(s);一样。

@arttronics 对不起，我没有说清楚，我在我的问题中简要提到了内容的高度将是动态的。我刚刚为示例选择了 10000 像素。我希望它经常达到这个值，有时会更多（Ajax 提要），并且在某些页面上可能接近 0。这就是我同步 .height() 的原因，尽管也许有更好的方法来做到这一点。关于内容到达底部，不确定您的意思，但请记住，页脚也必须位于底部。

@BoLiao，我添加了您的评论以进一步澄清 SO 问题。您现在可以删除该已过时的评论。这条评论也将很快被删除。谢谢。

【参考方案1】：

难道不能只使用定位的scroll pane 或scroll area 滚动动态内容，只需将其定位在固定标题的正下方吗？