粘性標題CSS/JS

2011-08-02 93 views 7 likes

我今天發現這個網站http://www.forward-thinker.co.uk/。有沒有人知道如何製作這樣的粘性標題？粘性標題CSS/JS

2011-08-02 DaveS

火狐+螢火蟲=找出它是如何工作 –

或Chrome +開發工具 – NickAldwin

或Internet Explorer + F12 :-P – 2GDev

回答

該特定網站使用jQuery的$(window).scrollevent。它會檢查滾動區域（$(this).scrollTop();）的頂部是否低於某個高度。如果是這樣，它會在頭文件的css中添加一個包含position:fixed的類（它也會更改它的高度，因爲只有部分標題滾動了）。如果滾動到的區域更靠近頂部，則腳本從頭部的CSS中移除包含position:fixed的類並將高度更改回其原始值。

來源

2011-08-02 14:01:13 NickAldwin

謝謝，我會試試看。 – DaveS

作爲建議，我建議使用'scroll'事件在標題上切換一個類。將CSS保存在css文件所在的位置。 – zzzzBov

@zzzzBov偉大的建議！這實際上是網站的功能。更新答案... – NickAldwin