Sticky header CSS / JS

时间:2011-08-02 13:46:56

标签: javascript css

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

2 个答案:

答案 0 :(得分:8)

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

答案 1 :(得分:3)

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

我找到了一些教程:

Nettuts

here

here

here

here

这里有一个资源:

Jquery Stalker