导航元素粘性定位效果示意实例页面

展示

我是一段文字，我没什么用，就是用来撑开高度用的，这样页面就会出现滚动条，就可以测试上面黑色的导航元素是否有粘性效果了。

代码

HTML：

<nav>
    <h3>导航A</h3>
    <h3>导航B</h3>
    <h3>导航C</h3>
</nav>
<p class="stretch">我是一段文字，...果了。</p>

CSS：

nav {
    display: table;
    width: 100%;
    table-layout: fixed;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
nav h3 {
    display: table-cell;
    outline: 1px solid #fff;
    background-color: rgba(0,0,0,.75);
    color: #fff;
    text-align: center;
    padding: 10px;
}
.stretch {
    width: 2em;
    width: min-content;
    margin-left: auto;
    margin-right: auto;
}