如何辨別哪些錨鑑於使用javascript

Question

我有一個指向該頁面的differenct部分，由ID標識的導航標籤：

<section id="1"></section> 
<section id="2"></section> 
<section id="3"></section> 

然後我鏈接到一節中我的導航鏈接：

<a href="#1"></a> 

現在我想將一些自定義樣式應用於導航鏈接，當相應的部分顯示在瀏覽器的視口中時。

單擊鏈接將該URL添加到URL的末尾，但由於我希望能夠應用樣式，即使用戶沒有點擊任何鏈接，我覺得這不是一個有效的解決方案。

是否有一個CSS屬性，我用javascript檢查，告訴我某個部分在視圖中？

我正在尋找一種可用於多種屏幕尺寸的解決方案。

Answer 1

您可以使用scrollSpy或類似的東西。這個想法是檢查哪些元素在視口內，並通過js分配相應的類。

這可以在沒有任何庫可以輕鬆完成，以及：

1. 監聽滾動事件的文件
2. 運行您的計算功能（這應該是throttled）
3. 選擇所有導航項目和檢查他們在視（+的offsetTop高度）
4. 分配類