粘性标题 CSS / JS答案

【问题标题】：Sticky header CSS / JS粘性标题 CSS / JS
【发布时间】：2011-08-02 23:18:50
【问题描述】：

我今天找到了这个网站http://www.forward-thinker.co.uk/。有谁知道如何制作这样的粘性标题。？

【问题讨论】：

Firefox + Firebug = 了解它是如何工作的
或 Internet Explorer + F12 :-P
我试过这个，如果我禁用 JS 那么它就不起作用了。如果您使用 firebug 或 chrome 开发工具，则无法在不刷新页面的情况下删除 JS 代码，这会将其全部放回原处。
@DaveS，你将无法禁用 JS 并让它工作。为了优雅降级，只需将页眉留在页面顶部即可。
你应该查看源代码！你知道吗，网络开发搞砸了，无论你做什么，你都必须发布你的实际代码并且人们可以看到它，尝试做查看源代码。

【解决方案1】：

该特定站点使用 jQuery 的 $(window).scroll event。它检查滚动到区域的顶部 ($(this).scrollTop();) 是否低于某个高度。如果是这样，它将向标题的 css 添加一个包含 position:fixed 的类（它也会更改其高度，因为只有部分标题滚动）。如果滚动到的区域更靠近顶部，则脚本会从标题的 css 中删除包含 position:fixed 的类并将高度更改回其原始值。

【讨论】：

作为建议，我建议使用scroll 事件在标题上切换一个类。将 CSS 保留在 css 文件中它所属的位置。
@zzzzBov 好建议！这实际上就是该网站所做的。正在更新答案...
@NickAldwin，我没有看到 Firebug 中的类变化。
@zzzzBov 我在 Chrome 中看到的...js的相关部分可以在这里看到pastebin.com/pACGhtem（第171行）
谢谢尼克，这帮助很大！

【解决方案2】：

这是一种称为“粘性滚动”或“滚动跟随”的技术

我为你找到了一些教程：

开启Nettuts

或here

这里有一个资源：

Jquery Stalker

【讨论】：