position: sticky;

最新推荐文章于 2025-06-06 15:18:29 发布
转载 最新推荐文章于 2025-06-06 15:18:29 发布 · 46 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/wangqing100/p/8460574.html

就是在一个内容中，我们可以固定一个部分，然后到了另一个内容，又会固定另外一个部分。

　　同样也可以设置top值， 这个值是border上边缘和包裹元素的下边缘之间的距离，但是一旦滚动起来，就是和浏览器顶部的距离了，话不多说，直接上demo，一看便懂。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alink</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .wrap {
            border: 20px solid blue;
        }
        .header {
            position: sticky;
            top: 20px;
            border: 20px solid red;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="header">
            这是头部
        </div>
        <div class="content">
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
        </div>
    </div>
    <div class="wrap">
        <div class="header">
            这是另一个头部
        </div>
        <div class="content">
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
        </div>
    </div>
</body>
</html>

 

这是头部
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是内容部分
这是另一个头部
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容
这是另一个内容

 

转载于:https://www.cnblogs.com/wangqing100/p/8460574.html

通过position: sticky与滚动监听打造智能导航栏
weixin_41455464的博客
06-28 183
简单来说，就是监听浏览器的滚动事件，当页面滚动时，执行一段 JavaScript 代码。我们可以利用这个机制，判断当前滚动到了哪个 section，然后给对应的导航项添加一个“active”类，让它高亮显示。
JS解决position:sticky的兼容性问题的方法
11-30
在前端开发中，`position: sticky` 是一种CSS布局属性，它允许元素在滚动到某个阈值时在页面上保持“粘性”。然而，`position: sticky` 在某些浏览器，尤其是旧版本的Android设备上可能存在兼容性问题。为了解决这个...
详解position: sticky粘性定位
橘猫吃不胖的博客
01-20 1517
深入了解sticky属性值与粘性定位 1 前言 1 可滚动元素对粘性定位的影响 2 理解粘性定位的计算规则 3 理解粘性定位的堆叠规则 4 其他
position:sticky
热门推荐
JiangLittleBai的博客
10-12 2万+
一直以来都忽略了position:sticky这个属性 现在回过头一看，我都错过了些什么。。。。。。 position:sticky简介 设置了position:sticky的元素并不会脱离文档流。 当元素在区域内，元素不受定位的影响（top、left等设置无效） 当发生滚动，元素就要移出区域时，定位又会变成fixed，根据设置的left、top的值进行定位，像是fixed效果 tagg{ position:sticky; top:0; } 必须注意的点 设置了po
前端关于position: sticky
m0_69301850的博客
06-06 313
粘性定位（）需要父容器是可滚动的（如或设置了overflow的容器），且父容器不能有。sort-box在sort-box的样式中添加以下 CSS 属性：top: 0;/* 距离顶部 0px 时触发粘性 *//* 确保悬浮时覆盖下方内容 *//* 背景色避免透明 */
position:sticky不生效
qq_38886284的博客
11-10 5669
通常我们用来实现吸顶效果都会用到position:sticky,但是在以下这几种情况的时候sticky会失效。
position:sticky 粘性定位
卿本无忧的博客
03-03 2万+
position:sticky 粘性定位
position: sticky 粘性定位
STATICHIT静砸的博客
10-22 470
今天写项目时遇到一个问题，页面中的锚点设置了绝对定位，但当整个页面往下滚动时，锚点会飞上去，这里需求是当页面整体未滚动时锚点固定定位在左侧顶部，但当整个页面滚动时锚点需要吸顶。为了实现这个需求，我们可以使用position属性的sticky属性值。最终我设置float：left；实现了锚点区域浮动靠左（不撑开中间列表的位置）且与左侧有40px的边距（完全靠左不美观）top: 10px;实现粘性定位。
position: sticky
renyudouhui的博客
07-14 163
css position的值除了relative，absolute，fixed，static外多了一个粘性布局sticky。它的作用是在dom元素滚动到父元素外的时候可以念在某个位置，利用js也可以实现这个效果。 <style> .father { /* width: 100px; */ height: 50vh; border: 1px solid #ccc; overflow: auto; } .son {
css position：sticky
weixin_56008510的博客
11-01 195
在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。在向下滚动时，粘性定位盒子会先固定在屏幕顶部，直到所有 粘性定位盒子 的项均完成滚动后，才被 下面的盒子替代。元素在跨越特定阈值前为相对定位，之后为固定定位。相对定位和固定定位的混合。粘性定位可以被认为是。
position: sticky 属性
文摘资讯
11-13 372
关于 position 属性主要有五个值：static relative fixed absolute sticky常见的就是 relative 和 absolute 这两个属性。relative 表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。absolute 表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。比较复杂的是 sticky 属性。...
position:sticky用法介绍及浏览器兼容性
09-25
用户的屏幕越来越大，而页面太宽的话会不宜阅读，所以绝大部分网站的主体宽度和之前相比没有太大的变化，于是浏览器中就有越来越多的空白区域，所以你可能注意到很多网站开始在滚动的...position:sticky为此而生,接下来
详解css粘性定位position：sticky问题采坑
12-14
CSS中的`position: sticky`是一种混合定位方式，它结合了`relative`和`fixed`的特点。在页面滚动过程中，当元素距离其父元素达到设定阈值（如`top: 100px`）时，`position: sticky`会使元素变为固定定位，保持在屏幕...
微信小程序----position:sticky
12-20
在微信小程序开发中，`position:sticky` 是一个非常实用的CSS样式，它结合了`position:relative`和`position:fixed`的特点，用于创建元素的粘性定位。这个特性允许元素在滚动到特定位置时固定在屏幕的某个位置，从而...
cloudhsm-jvm-1.4.51-sources.jar
09-13
cloudhsm-jvm-1.4.51-sources.jar
sparkling-water-doc_2.12-3.42.0.3-1-3.4.jar
最新发布
09-13
sparkling-water-doc_2.12-3.42.0.3-1-3.4.jar
backupgateway-jvm-1.3.35-sources.jar
09-13
backupgateway-jvm-1.3.35-sources.jar
bedrockruntime-0.32.4-beta-sources.jar
09-13
bedrockruntime-0.32.4-beta-sources.jar
appmesh-jvm-1.0.64-javadoc.jar
09-13
appmesh-jvm-1.0.64-javadoc.jar
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值