滾動和CSS類別切換後的固定導航

Question

我創建了一個簡單的網頁佈局。你可以在這裏找到它：http://jsfiddle.net/gUWdJ/1129/

我設法創建固定導航後，用戶向下滾動到某個點。我一直在努力實現的是當用戶從一個部分移動到另一個部分時，爲每個列表項分配一個class="active"。

當導航被固定在視口的頂部是當我想要的class="active"加入到添加的第一個列表項

<li> 
    <a href="#something" class="active">something</a> 
</li> 

，然後我繼續前進了網頁，將class="active"被刪除，然後到下一個列表項目。

我發現了一些插件可以做到這一點，但事實是我沒有設法將它們集成到我的項目中。另外，由於我對jQuery非常陌生，所以我不理解代碼。

我也發現了這個http://jsfiddle.net/gUWdJ/3/這再次有困難的時候整合..

那麼，你有什麼建議？

預先感謝您

Answer 1

我更新了fiddle，包括JavaScript的一個新塊，處理的基礎上，你給的例子小提琴菜單選項中突出顯示。

我加了塊：

$(".main-content section").each(function(i) { if ($(this).position().top <= windscroll - hdr + 20) { mn.find('a.active').removeClass('active'); mn.find('a').eq(i).addClass('active'); } });

這個循環遍歷每個你有菜單選項，並檢查窗口滾動的部分。減去標題的高度並添加一些填充後，將該數字與頁面上元素的位置進行比較。如果滾動大於位置，則將菜單元素標記爲活動。

請記住，由於各部分相當小，所以最後幾個部分可能不會突出顯示，因爲您無法向下滾動。