在固定 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>