sticky定位

最新推荐文章于 2024-02-19 14:10:48 发布

hkwBest

最新推荐文章于 2024-02-19 14:10:48 发布

阅读量1.2w

点赞数 8

分类专栏： css 文章标签： sticky position 定位

本文链接：https://blog.csdn.net/hkwbest/article/details/87094619

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

我们都知道常见的定位方式有static、relative、absolute、fixed，今天来介绍一种‘粘性定位’sticky。
定义
粘性定位可以被认为是相对定位（relative）和固定定位（fixed）的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
也就是说sticky会让元素在页面滚动时如同在正常流中（relative定位效果），但当滚动到特定位置时就会固定在屏幕上如同 fixed ，这个特定位置就是指定的top, right, bottom 或 left 四个阈值其中之一
作用域
设置了sticky定位的元素相对于第一个定位不为static的父级元素的位置，sticky的作用区域也是在该父级元素的内。也就是说粘性布局的效果只在该父元素内表现出来。这一点与fixed布局有区别。
看一个例子：

body {
    padding: 20px;
    height: 2000px;
}
.container {
    width: 500px;
    border: 5px solid rgb(111,41,97);
    border-radius: .5em;
    padding: 10px;
    position: relative;
}
.item {
    height: 30px;
    width: 100%;
    background-color: rgba(111,41,97,.3);
    position: sticky;
    top: 0;
}

<body>
   <div class="container">
        <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce. </p>
        <div class="item"></div>
        <p>Grape silver beet collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
        <p>Grape silver beet collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
        <p>Grape silver beet collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
    </div>
</body>

当页面刚开始滚动时item元素并无特殊的表现（相当于relative定位），当滚动到特殊位置（top: 0）时出现粘性定位效果（相当于fixed定位），继续滚动页面发现item元素并不是一直定位在顶部，当其父元素不在视窗内时item元素失去粘性效果。这一点与fixed的表现不同。fixed定位元素是相对于整个视窗定位。

hkwBest

关注

8
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
sticky定位

我们都知道常见的定位方式有static、relative、absolute、fixed，今天来介绍一种‘粘性定位’sticky。定义粘性定位可以被认为是相对定位（relative）和固定定位（fixed）的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。也就是说sticky会让元素在页面滚动时如同在正常流中（relative定位效果），但当滚动到特定位置时就会固定在屏幕上如同 fixe...
复制链接

扫一扫