在固定位置创建粘滞Div的问题

Question

我已经尝试用下面的代码制作一个粘性的DIV，但是它没有像预期的那样工作。 当我向下滚动时，DIV是粘性的，但它与网站的页眉和页脚重叠。 如何使用CSS/JS解决这个问题？ 如有任何帮助，将不胜感激。谢谢。

null

.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>

null

-----

Answer 1

我想这就是您正在寻找的内容，只需滚动页面即可看到粘滞的div，更好的方法是在整个页面中运行代码片段

null

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`;
  }
}

css prettyprint-override">body {
  height: 300vh;
}

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

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

Answer 2

你不能用一个数字来命名类而不转义它们。

// for '1' class, write :
.\31 {
  color :red;
}