css粘性定位（sticky）演示
<div class="codebox" data-prev="1"><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>
</div>
<script>
function loadLineNumFile() {
const script = document.createElement('script');
script.charset = 'utf-8';
script.src = 'https://638183.freep.cn/638183/web/helight/linenumber-2026.js';
script.defer = true;
script.onload = () => addLineNumber();
document.head.appendChild(script);
}
loadLineNumFile();
</script> <style>
.artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
.artBox table { border-collapse: collapse; white-space: pre-wrap; box-sizing: border-box; }
.artBox th, .artBox td { padding: 8px 10px; border: 1px solid #999; }
.artBox th { text-align: center; background: #eee; }
</style>
<div class="artBox">
<h2>【附】position 属性汇总</h2>
<table>
<thead>
<tr>
<th width="10%">值</th>
<th width="10%">含义</th>
<th>描述</th>
<th width="10%">备注</th>
</tr>
</thead>
<tbody><tr>
<td>absolute</td>
<td>绝对定位</td>
<td>相对于 static 定位以外的第一个父元素对元素进行定位</td>
<td>-</td>
</tr>
<tr>
<td>fixed</td>
<td>固定定位</td>
<td>相对于浏览器窗口对元素进行定位</td>
<td>-</td>
</tr>
<tr>
<td>relative</td>
<td>相对定位</td>
<td>相对于浏览器窗口对元素进行定位</td>
<td>-</td>
</tr>
<tr>
<td>static</td>
<td>静态定位</td>
<td>本质上是没有定位，元素出现在正常的流中</td>
<td>✔️ 默认值</td>
</tr>
<tr>
<td>sticky</td>
<td>粘性定位</td>
<td>本质上是一种混合定位：元素在正常文档流中相对定位，当滚动到指定阈值时则切换为固定定位</td>
<td>-</td>
</tr>
<tr>
<td>inherit</td>
<td>继承</td>
<td>规定应该从父元素继承 position 属性的值。</td>
<td>-</td>
</tr>
<tr>
<td>initial</td>
<td>初始化</td>
<td>设置元素position属性为默认值</td>
<td>-</td>
</tr>
</tbody></table>
</div> 原来用了粘性定位，翻页时这个标题也不移动呢{:4_204:} 真好，又学习一个新的，这个以前还不知道呢，感谢黑黑的耐心讲解{:4_187:} 红影 发表于 2026-4-26 23:10
原来用了粘性定位，翻页时这个标题也不移动呢
嗯，粘住了 红影 发表于 2026-4-26 23:10
真好，又学习一个新的，这个以前还不知道呢，感谢黑黑的耐心讲解
论坛用到这个效果的：每一页往上翻页的时候，翻到一定程度，导航条都会停留在顶部不动了 又一个新知识点，谢谢马老师讲授、演示position 属性的sticky值{:4_191:} 杨帆 发表于 2026-4-27 17:32
又一个新知识点，谢谢马老师讲授、演示position 属性的sticky值
这次 position 属性的汇总算是齐了 马黑黑 发表于 2026-4-27 21:30
这次 position 属性的汇总算是齐了
汇总position 属性很必要，谢谢马老师用心讲授{:4_190:} 杨帆 发表于 2026-4-28 08:25
汇总position 属性很必要，谢谢马老师用心讲授
{:4_180:} 马黑黑 发表于 2026-4-27 12:11
嗯，粘住了
这个好，需要的时候很派用途呢。 马黑黑 发表于 2026-4-27 12:13
论坛用到这个效果的：每一页往上翻页的时候，翻到一定程度，导航条都会停留在顶部不动了
对的，原来论坛也是用的这个效果，不说都没注意呢。{:4_173:} 红影 发表于 2026-4-30 15:59
对的，原来论坛也是用的这个效果，不说都没注意呢。
东东是你的，你都不了解 红影 发表于 2026-4-30 15:58
这个好，需要的时候很派用途呢。
貌似如此 马黑黑 发表于 2026-4-30 21:13
东东是你的，你都不了解
还真的不知道，就是一个玩的地方啊，谁了解那么多啊。 马黑黑 发表于 2026-4-30 21:14
貌似如此
谢谢黑黑带来的好东西{:4_187:} 红影 发表于 2026-5-1 17:05
谢谢黑黑带来的好东西
不阔气的 红影 发表于 2026-5-1 17:04
还真的不知道，就是一个玩的地方啊，谁了解那么多啊。
也是。很多人并不知道自己穿的内衣是什么品牌 马黑黑 发表于 2026-5-1 18:28
不阔气的
阔气是必须的啊{:4_173:} 马黑黑 发表于 2026-5-1 18:29
也是。很多人并不知道自己穿的内衣是什么品牌
也不知道自己吃的米是哪产的，反正能饱就行{:4_173:}
页:
[1]
2