粘性标题CSS / JS [英] Sticky header CSS / JS

问题描述

我今天找到这个网站 http://www.forward-thinker.co.uk/ 。有人知道如何做一个这样的粘性标题。

解决方案

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

I found this website today http://www.forward-thinker.co.uk/. Does anyone know how to make a sticky header like this.?

解决方案

That particular site utilizes jQuery's $(window).scroll event. It checks if the top of the scrolled-to area ($(this).scrollTop();) is below a certain height. If so, it adds to css of the header a class containing position:fixed (it also changes its height, since only part of the header scrolls). If the scrolled-to area is nearer to the top, the script removes the class containing position:fixed from the header's css and changes the height back to its original value.

这篇关于粘性标题CSS / JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！