Sticky header CSS / JS

本文关键字：JS CSS header Sticky 更新时间：2023-09-26

我今天找到了这个网站http://www.forward-thinker.co.uk/。有人知道怎么做这样的粘头吗?

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