位置的替代方案是什么:粘性?

时间:2016-04-15 05:58:20

标签: javascript html css css-position

根据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的情况下添加新类。

2 个答案:

答案 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>