开发者

Sticky header CSS / JS

开发者 https://www.devze.com 2023-03-25 13:18 出处:网络
I found this website today http://www.forward-thinker.co.uk/. Does anyone know how to 开发者_JAVA百科make a sticky header like this.?That particular site utilizes jQuery\'s $(window).scroll event.It c

I found this website today http://www.forward-thinker.co.uk/. Does anyone know how to 开发者_JAVA百科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.


It's a technique called "sticky scroll" or "scroll follow"

I found some tutorials for you:

On Nettuts

or here

or here

or here

or here

and there's a resource here:

Jquery Stalker

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号