在固定 position 中創建粘性 Div 的問題

Question

我試圖用下面的代碼制作一個粘性 DIV，但它沒有按預期工作。 當我向下滾動時，DIV 是粘性的，但它與網站 Header 以及頁腳重疊。 如何使用 CSS/JS 解決這個問題？ 任何幫助都會很明顯。謝謝。

 .a{ float: left; width: 67%; }.b{ width: 32%; float: right; position: fixed; right: 0; }.c{ width: 100%; }

 <div class="c"> <div class="a"> ----- </div> <div class="b"> ----- </div> </div>

-----

Answer 1

我想這就是您要查找的內容，只需滾動頁面即可查看粘性div更好的是在整頁中運行代碼段

 window.onscroll = function() { progress = document.getElementsByClassName('b')[0]; let height = window.pageYOffset; if (height > 395) { progress.style.position = 'fixed'; progress.style.top = `${20}px`; } else { progress.style.position = 'absolute'; progress.style.top = `${400}px`; } }

 body { height: 300vh; }.b { width: 32%; position: absolute; top: 400px; background: darkcyan; height: 250px; }

 <div class="b"></div>