隐藏固定透明标题下的滚动内容，滚动背景 [英] Hide scrolling content under fixed transparent header, scroll background

问题描述

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

Lets say I have a background image, a fixed header image with transparent parts, a content div with a semi-transparent background and dynamic height in a traditional header/content/footer layout.

我试图实现的效果：在固定标题下滚动背景和内容（内容隐藏和背景显示）。

The effect I'm trying to achieve: scrolling background and content under a fixed header (with content hidden and background showing).

阅读一堆相关主题，例如
隐藏透明标题下的滚动内容等等，但它们处理的背景也可以固定的情况。我必须是可滚动的。

I've read a bunch of related topics, such as Hide Scrolling Content Under Transparent Header etc. But they deal with situations where the background can be fixed too. Mine has to be scrollable.

我设法通过添加相同的背景图像到头部图像div的包装div，并滚动它与jQuery .scrollTop（）上的窗口滚动事件。

I managed to get what I need by adding the same background image to a wrapper div of the header image div and scrolling it with jQuery .scrollTop() on window scroll event.

参考： jsbin示例

参考： jsFiddle示例

此方法的问题是所有浏览器中的同步错误命名为Firefox。

The problem of this method is pretty bad sync (some lag, tearing) in all browsers not named Firefox.

要澄清：内容的高度将是动态的。 10000px 我刚刚选择的例子。我期望它经常达到，有时更多（AJAX feed），在一些页面上它可以接近 0 。这就是为什么我同步 .height（）。请记住，底部的页脚div 是 。

To clarify: The height of content will be dynamic. 10000px I just picked for the example. I expect it to reach that quite often though, sometimes more (AJAX feeds), and on some pages it can be close to 0. That's why I'm syncing .height() too. Keep in mind that footer div at the bottom is under the content div.

我认为 必须是更好的方法 。有任何建议吗？

And I think there has to be a better way. Any suggestions?

推荐答案

您不能只使用定位的滚动窗格或滚动区域滚动动态内容，只需将其放置在固定标题下即可？

Couldn't you just use a positioned scroll pane or scroll area to scroll your dynamic content, simply positioning it right under your fixed header?

这篇关于隐藏固定透明标题下的滚动内容，滚动背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！