我今天发现了这个网站 http://www.forward-thinker.co.uk/。有没有人知道如何制作类似的固定头部？
粘性页眉的CSS / JS
7
- DaveS
10
4Firefox + Firebug = 发现它如何工作 - Richard H
2或者使用 Internet Explorer + F12 :-P - 2GDev
@DaveS，你无法禁用JS并使其正常工作。为了优雅的降级，请将头部留在页面顶部即可。 - zzzzBov
你知道吗，网络开发很糟糕，无论你做什么，你都必须发布你的实际代码，人们可以查看它，试着查看源代码。 - Kumar
@Kumar，这个源代码是混淆的... http://pastebin.com/pACGhtem - NickAldwin
显示剩余5条评论
2个回答
8
该网站使用了jQuery的$(window).scroll事件。它检查滚动区域的顶部($(this).scrollTop();)是否低于某个高度。如果是，则将包含position:fixed的类添加到标题的css中(它还会更改其高度，因为只有部分标题可以滚动)。如果滚动区域更接近顶部，则脚本会从标题的css中删除包含position:fixed的类，并将高度改回其原始值。
- NickAldwin
5
作为建议，我建议使用“scroll”事件在标题上切换类。将CSS保留在css文件中。 - zzzzBov
@zzzzBov 很好的建议！这实际上就是该网站的功能。正在更新答案... - NickAldwin
@NickAldwin，我在Firebug中没有看到类别的变化。 - zzzzBov
1@zzzzBov 我在Chrome中看到了它... 相关的js部分可以在这里看到 http://pastebin.com/pACGhtem (第171行) - NickAldwin
谢谢Nick，这帮了很多！ - DaveS
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接