利用position：sticky实现粘性布局

最新推荐文章于 2024-06-17 18:04:45 发布

贝塔贝卡贝

最新推荐文章于 2024-06-17 18:04:45 发布

阅读量742

点赞数

CC 4.0 BY-SA版权

文章标签： css3

本文链接：https://blog.youkuaiyun.com/Kiruthika/article/details/111406926

博客介绍了CSS中position:sticky属性，它能在页面滚动时让元素保持在视图上方，实现吸附效果。同时提醒章节行需设置背景色，避免文字重叠。还提到若项目要兼容低版本浏览器，使用该属性需慎重。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

position:sticky，实现的效果就是在页面滚动的时候保持元素（如下图中的章节一）在页面视图上方，也就是吸附效果。
注意：章节行需设置背景色。若不设置背景色（背景透明），正常文档流的文字就会和章节行文字重叠在一起显示。
在这里插入图片描述
CSS:

main{
   width: 400px;
    height: 300px;
    margin: 200px auto;
    overflow: auto;
}

header{
    position: sticky;
    top: 0;
    height: 30px;
    background-color: cyan;
}

HTML:

<main>
    <header>章节一</header>
    <div class="content"></div>
    <header>章节二</header>
    <div class="content"></div>
    <header>章节三</header>
    <div class="content"></div>
    <header>章节四</header>
    <div class="content"></div>
</main>

JS:

<script src="../libs/jquery/jquery-3.4.1.min.js"></script>
<script>
   let num = 20;
   let html = '';
   for(var i = 0; i < num; i++){
       html += `<p>学习第${i + 1}天</p>`
   }

   Array.prototype.slice.call($(".content")).forEach(item =>{
       item.innerHTML = html;
   })

</script>