如何透過 jquery 偵測當滾動到相對應的區塊時，改變 header 的 active 狀態

jquery javascript

AWEI 2021-11-01 21:36:51 ‧ 1568 瀏覽

分享至

大家好，我有個問題不知道該怎麼做才能實現！
是這樣的，我希望在滾動文章時比方說滾動到 service 這個區塊的文章時，此時 header 的 service 就可以增加黃色的 CSS 樣式，但是我只會做到點擊時增加樣式，怎麼滾動的時候改變 header 的樣式就不知道了？

謝謝大家的幫助。
我的程式碼

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

Mao

iT邦研究生 5 級 ‧ 2021-11-01 22:30:15

最佳解答

給你一個方向，需要頁面綁定監聽，當畫面滾動到標籤高度時，自動幫你把 header 導航條變色。

範例：

/*  獲取所有 item  */
const items = document.querySelectorAll('.item');
/*  獲取內容  */
const content = document.querySelector('.content');
/*  獲取每個 section  */
const sections = document.querySelectorAll('section');
/*  把每個 section 高度傳進 sectionY 裡  */
const sectionY = []
sections.forEach(e => sectionY.push(e.offsetTop - 148));

// console.log(sectionY)

/*  內容監聽並產生互動
 *  這個步驟還有更好的做法可以優化
 *  這裡用最簡單直白的方式
 */
content.addEventListener('scroll', (e)=>{
  if (sectionY[1] > e.target.scrollTop) {
    items[1].classList.remove('active');
    items[0].classList.add('active');
  } else {
    items[0].classList.remove('active');
    items[1].classList.add('active');
  }
}, false)

Codepen 範例，我只有做 JS 偵測滾動的部分