根据MDN article位置属性,position: sticky
仍然是一个实验性API。此外,任何版本的Internet Explorer都不支持它。所以,
使用或不使用javaScript,有没有办法达到与
position: sticky
相同的效果?
我认为可以使用position: fixed
并且不使用javascript来实现此效果。因为MDN page上的在本文部分的行为与应用于它的位置粘性完全相同。即使我禁用javaScript也能正常工作。我通过 inspect element 找到的MDN使用的标记为,
<div style="width: auto; max-height: none; top: 0px;" id="toc" class="toc toggleable"> ...
</div>
当我向下滚动时,标记更改为在容器fixed
上包含div
类。我不知道如何在不使用javascript的情况下添加新类。
答案 0 :(得分:2)
使用javascript polyfill,例如fixed-sticky https://github.com/filamentgroup/fixed-sticky
在MDN上的在本文部分中fixed
类是通过javascript切换的,我不认为可以在滚动事件上切换元素上的类不借助javascript。
答案 1 :(得分:0)
此外,您可以使用实现相同概念的 Sticky 库:http://sticky.kissui.io/
它是一个Javascript / CSS库,易于使用。一个例子是:
<div data-kui-sticky>
Sticky position for this DIV
</div>