html粘性导航原理,position:sticky粘性定位

在浏览网站时，通常会看到HTML元素(如横幅和导航)滚动到一定位置时就固定在浏览器的顶部。之前我们一直采用JavaScript滚动事件来监听滚动到一定位置时给此元素添加position: fixed固定定位。你是知道的固定定位是脱离文档流的哟，因此事先在HTML结构上，不要忘了给这个元素添加一个父元素写上高度占位，不然滚动到一定位置时就会出现页面抖动。如果不写高度占位，你可以尝试CSS Scroll Snap实现滚动捕捉及填充滚动容器空白区域方案。

position:sticky;

MDN很好地解释道：粘性定位是相对和固定定位的混合体。该元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定位置。

注意：混合体，混合体，混合体哟，我还是担心抖动的问题，自己试一把吧

position: sticky标题

检查文字是否像position:fixed一样有抖动

漂亮，确实是相对和固定定位的混合体。position:sticky还可以实现图片堆叠效果。

实例之表格标题行固定

html结构：

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Anna11111111111111111111111111James22222222222222222222222222

.....

css表现：html,body {

margin: 20px;

padding: 0;

height: 100%;

}

body {

display: flex;

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

font-size: 90%;

color: #333;

justify-content: center;

}

.table-wrapper {

max-width: 700px;

overflow: scroll;

}

table {

position: relative;

border: 1px solid #ddd;

border-collapse: collapse;

}

td, th {

white-space: nowrap;

border: 1px solid #ddd;

padding: 20px;

text-align: center;

}

th {

background-color: #eee;

position: sticky;

top: -1px;

z-index: 2;

&:first-of-type {

left: 0;

z-index: 3;

}

}

tbody tr td:first-of-type {

background-color: #eee;

position: sticky;

left: -1px;

text-align: left;

}

总结移动端用用挺好啊

position:sticky同时top: -1px很重要的，不然好像不起作用，你可以试试