當用戶到達頁面底部香草 JS 時如何添加類

Question

我正在努力尋找對此的任何引用，但我想要實現的是在頁面滾動底部切換一個類並在向上滾動時再次將其刪除

我對 JS 不太熟悉，也不知道從哪里開始 - 我不想使用 jQuery

 var footer = document.querySelector('.site-footer'); footer.classList.toggle('show');

 section { height:150vh; } .site-footer { position: fixed; bottom:-100%; height: 200px; width: 100%; background:red; transition: bottom 0.5s ease; } .site-footer.show { bottom:0; }

 <section></section> <div class="site-footer"></div>

Answer 1

檢查窗口的innerHeight和pageYOffset一起是否等於或大於頁面的offsetHeight ：

 var footer = document.querySelector('.site-footer'); window.addEventListener('scroll', () => { const atBottom = document.body.offsetHeight - (innerHeight + pageYOffset) <= 0; footer.classList.toggle('show', atBottom); }, { passive: true });

 section { height: 150vh; } .site-footer { position: fixed; bottom: -100%; height: 200px; width: 100%; background: red; transition: bottom 0.5s ease; } .site-footer.show { bottom: 0; }

 <section></section> <div class="site-footer">footer</div>

Answer 2

您可以為滾動事件添加一個事件偵聽器並切換“顯示”類。

 var footer = document.querySelector('.site-footer'); window.addEventListener("scroll", function(){ footer.classList.toggle('show', this.innerHeight + this.scrollY >= document.scrollingElement.scrollHeight); });

 section { height:150vh; } .site-footer { position: fixed; bottom:-100%; height: 200px; width: 100%; background:red; transition: bottom 0.5s ease; } .site-footer.show { bottom:0; }

 <section></section> <div class="site-footer"></div>

Answer 3

如果您不處理超級舊版瀏覽器，請使用交叉觀察器。

您不必聽滾動、准備或其他任何內容……只需聽聽邊界何時響應狀態變化並對此做出反應。