如何制作固定位置的标题？

Question

当顶部等于0％时是否可以将标头的位置固定？〜例如，标头顶部的值从20％开始，向下滚动并达到0％的值，然后保持固定。

我只能使用HTML / CSS。

Answer 1

是的，可以通过新提议的属性position: sticky; 当前仅在Firefox中受支持，并在Safari中作为前缀。 有关浏览器支持的更多信息，请参见Caniuse 。

从W3C ：

粘性放置的框的位置类似于相对放置的框，但是偏移是通过滚动框参照最近的祖先计算的，如果没有祖先具有滚动框，则参照视口进行计算。

具体而言，一旦按照常规流程布置了箱子或使其漂浮，便可以如下所述计算其粘性偏移。 以这种方式对框（B1）进行偏移不会对随后的框（B2）产生影响：B2的位置就好像B1没有偏移，并且在应用B1的偏移后B2也没有重新定位。 这意味着粘性定位可能导致框重叠。 但是，如果粘性定位导致“溢出：自动”或“溢出：滚动”框溢出，则用户代理必须允许用户访问此内容（在其偏移位置），这可以通过创建滚动机制来实现。 ，可能会影响布局。

JSFiddle示例

 html, body { margin: 0; } body * { margin: 20px; padding: 20px; } .header { margin: 0; padding: 20px; background: #000; } .header span { display: block; color: #fff; margin: 0 auto; text-align: center; padding: 0; } .placeholder { border: 1px solid black; margin: 0 auto; text-align: center; height: 300px; } .slider { background: #006264; color: white; font-weight: bold; margin: 0 auto; position: sticky; top: 0px; } 

 <div class="header"><span>This is a header</span></div> <div class="placeholder">This div holds place</div> <div class="slider">This should slide up and then stick.</div> <div class="placeholder">This div holds place</div> <div class="placeholder">This div holds place</div> <div class="placeholder">This div holds place</div> <div class="placeholder">This div holds place</div>