css粘性定位（sticky）演示

马黑黑

<style> .pa { margin: 30px auto; padding: 0 10px 10px 10px; width: 40vw; height:32vh; overflow: auto; border: 1px solid gray; background: var(--bg); --bg: white; } .sticky-box { margin: 0; padding: 8px; position: sticky; top: 0; background: var(--bg); } .tMid { text-align: center; } </style> <h2 class="tMid">请点击下方按钮+翻页查看效果</h2> <div class="pa"> <h2 class="sticky-box" id="t2">粘性(sticky)标题</h2> <ol> <li>项目</li><li>项目</li><li>项目</li><li>项目</li><li>项目</li> <li>项目</li><li>项目</li><li>项目</li><li>项目</li><li>项目</li> <li>项目</li><li>项目</li><li>项目</li><li>项目</li><li>项目</li> <li>项目</li><li>项目</li><li>项目</li><li>项目</li><li>项目</li> <li>项目</li><li>项目</li><li>项目</li><li>项目</li><li>项目</li> <li>项目</li><li>项目</li><li>项目</li><li>项目</li><li>项目</li> </ol> </div> <div class="tMid"> <button id="btnPosState" type="button">点击切换标题标签 position 为 initial</button> </div> <script> btnPosState.onclick = function() { var positionState = window.getComputedStyle(t2).getPropertyValue('position'); this.textContent = '点击切换标题标签 position 为 ' + positionState; t2.style.setProperty('position', positionState === 'sticky' ? 'initial' : 'sticky'); t2.textContent = positionState === 'sticky' ? '常规(static)标题' : '粘性(sticky)标题'; } </script>

马黑黑

【附】position 属性汇总

值	含义	描述	备注
absolute	绝对定位	相对于 static 定位以外的第一个父元素对元素进行定位	-
fixed	固定定位	相对于浏览器窗口对元素进行定位	-
relative	相对定位	相对于浏览器窗口对元素进行定位	-
static	静态定位	本质上是没有定位，元素出现在正常的流中	✔️ 默认值
sticky	粘性定位	本质上是一种混合定位：元素在正常文档流中相对定位，当滚动到指定阈值时则切换为固定定位	-
inherit	继承	规定应该从父元素继承 position 属性的值。	-
initial	初始化	设置元素position属性为默认值	-

红影

原来用了粘性定位，翻页时这个标题也不移动呢

红影

真好，又学习一个新的，这个以前还不知道呢，感谢黑黑的耐心讲解