如何自動添加一個類到基於主動錨的鏈接？

我有一個側邊欄的左邊，如：如何自動添加一個類到基於主動錨的鏈接？

<ul> 
    <li><a href="#anchor1">Anchor 1</a></li> 
    <li><a href="#anchor2">Anchor 2</a></li> 
    .... 
</ul>

和內容上的權利，就像這樣：

<h1 class="anchor-elem" id="anchor1">Anchor 1</h1> 
<h1 class="anchor-elem" id="anchor2">Anchor 2</h1>

點擊側邊欄的鏈接跳轉到錨......沒問題有。我試圖達到的目的是在進入頂部滾動位置時捕獲這些錨點，以便我可以向適當的LI元素添加一個類。我想自動執行此操作，而不必指定每個元素。

例如，我找到了答案，以類似的問題：http://bootstrapdocs.com/v3.1.1/docs/getting-started/

：

$(document).ready(function(){ 
    var section1Height = $('#section1').height(); 
    var section2Height = $('#section2').height(); 
    var section3Height = $('#section3').height(); 

    $(window).scroll(function() { 
     var winTop = $(window).scrollTop(); 
     if(winTop >= section1Height && winTop <= section2Height){ 
      $('#section1').addClass("newClass").not().removeClass("newClass"); 
     } else if(winTop >= section2Height && winTop <= section3Height){ 
      $('#section2').addClass("newClass").not().removeClass("newClass"); 
     } else if(winTop >= section3Height){ 
      $('#section3').addClass("newClass").not().removeClass("newClass"); 
     } 
     }); 
    });

僞的是我想達到

$(window).scroll(function() { 
    if .anchor-elem is in view -> 
    find it's relative link on the menu and add class "active" to it 
});

一個類似的例子是引導文檔邏輯

我看着他們的詞綴代碼，但是很混亂，因爲它與許多其他功能交織在一起。

有沒有簡單的方法來實現這一點？不使用bootstrap.js

來源

2015-02-23 user1447679

假設您已經使用jQuery，您可以獲取每個元素的.offset()並檢查窗口頂部是否低於.offset()。不要在每個滾動上獲得offset()，因爲它是非常昂貴的操作。如果可能的話，我建議在頁面加載時執行此操作，將值保存到數組中，然後檢查數組。如果您認爲用戶將調整窗口大小，這會影響偏移量，請在加載和調整大小時進行調整。下面是一個例子：http://jsfiddle.net/qars0w0o/3/

來源

2015-02-23 21:04:18

這太好了。謝謝。我所做的只是循環遍歷菜單中找到的任何錨點，並自動將它們推送到數組中，而不用識別每個錨點。感謝幫助！ – user1447679 2015-02-24 16:47:22

如何自動添加一個類到基於主動錨的鏈接？

回答

相關問題