滾動時的jQuery Stick標題

Question

我制作了一個小的小片段，使得一個子標題貼在頂部。 但是，就像我說的那樣 - 我絕不是js genious或者jQuery genious - 而且實際上遠非如此 - 我對自己的編碼能力表示懷疑。

• 演示在這里： http ： //jsfiddle.net/obmerk99/VvKq3/1/

問題：

• 1 - 似乎有很多插件（在這個網站上也有很多問題），代碼比我的代碼片段多得多 - 我錯過了什么？ 我究竟做錯了什么 ？
• 2 - 這將跨瀏覽器工作嗎？
• 3 ..這是一個小問題，如何避免發生的小“跳”？ （如果你去小提琴， 慢慢滾動 - 當腳本被喚起時你會看到主div“跳”..我試圖將另一個.pad類添加到較低的div中 -

在腳本被喚起時添加了類： .pad 。

.pad {填充頂：42PX;}

但它似乎不正常： http ： //jsfiddle.net/obmerk99/VvKq3/2/

• 5，如何計算div的實際位置？ 當我嘗試這樣的事情：

 var top = jQuery(window).scrollTop(); var div_top = jQuery('#header_stick').offset().top; if (top > div_top) // height of float header; 

它是跳躍的... http://jsfiddle.net/obmerk99/VvKq3/4/

• 6歡迎任何其他建議..

Answer 1

發生“跳躍”是因為元素占據了父元素中的空間，當你將其位置改為fixed它突然不再存在了。 我不知道處理它的最佳方法，但是一個選項是在你的 #header_stick之前添加一個小跨度（可能只有一個空格），它的高度相同，所以當它的類改變時仍會有是一個可以解釋高度差異的東西。 （ 更新：你的墊解決方案可能是最好的，一旦做得正確 ;見下文）

您的填充解決方案也可能有效，前提是：1）當用戶滾動到頂部時，您記得刪除該類（在您的小提琴中我看到您添加它，但是看不到刪除它）; 2）你得到了正確的高度 - 我仍然無法仔細查看你的代碼，所以我不知道你哪里出錯了。 （ 編輯：問題是你的.pad類使用浮動標題的高度，而不是標題 - 修復它並刪除類產生了我認為是正確的結果 ）

關於div的實際位置，您是否嘗試從父元素的偏移量中減去div的偏移量？ 這樣你就可以擁有相對於父母的位置（注意邊界之類的東西，但是我最近回答了另一個問題，這個問題很重要）。

更新：你的問題似乎是，當位置變為固定時，偏移也會發生很大變化。 我建議一次計算正確的高度，然后將其存儲在某處，以便滾動功能可以使用它。 換句話說，不要在滾動時計算它，這使得找到合適的theshold進行類切換變得更加困難。

除此之外，我認為你的代碼很好，而且我相信它也適用於跨瀏覽器（至少符合標准的那些;不能說任何關於舊版本的IE）。 非常有見地，我總是想知道這個“技巧”是如何工作的，現在我覺得它比我想象的更簡單......

Answer 2

你可以試試這種方式。 我做了一個更短的版本，以便於分析。 在這里小提琴

<div id="ontop">floating heading</div>
<header>sticky heading</header>
<div id="wrapper"> 
    1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>
</div>



#ontop {width:100%; height:80px; background-color:yellow;}
header {width:100%; height:20px; background-color:lightgrey; }
#wrapper {background-color:lightblue; height:5000px;}

.navfixed {position: fixed; top: 0px; z-index: 100; width:100%; display:block; margin-bottom:120px; } 
.wrapperBelow{margin-top:22px;}


$(function () {
    var elem = $('header'),
        wrapperElem = $('#wrapper'),
        elemTop = elem.offset().top;
    $(window).scroll(function () {
        elem.toggleClass('navfixed', $(window).scrollTop() > elemTop);
         wrapperElem.toggleClass('wrapperBelow', $(window).scrollTop() > elemTop);
    }).scroll();
});