在固定位置创建粘性潜水的问题

Question

我试图用下面的代码制作一个粘性div，但它没有按预期工作。当我向下滚动时，DIV是粘性的，但它与网站页眉和页脚重叠。如何使用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>