html - 如何制作固定位置的页眉？

Question

当top等于0%时，header的位置是否可以固定？~ 例如，标题顶部值从 20% 开始，我们向下滚动，它达到 0% 的值，然后保持固定。

我只能使用 HTML/CSS。

Answer 1

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

来自W3C :

A stickily positioned box is positioned similarly to a relatively positioned box, but the offset is computed with reference to the nearest ancestor with a scrolling box, or the viewport if no ancestor has a scrolling box.

Specifically, once a box has been laid out according to the normal flow or floated, its sticky offset is computed as described below. Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1 were not offset and B2 is not re-positioned after B1’s offset is applied. This implies that sticky positioning may cause boxes to overlap. However, if sticky positioning causes an 'overflow: auto' or 'overflow: scroll' box to have overflow, the user agent must allow the user to access this content (at its offset position), which, through the creation of a scrolling mechanism, may affect layout.

JSFiddle Example

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>