sticky定位示例

发表于

粘性定位区别于其他的定位方式，目前浏览器兼容性良好，使用起来很方便，但是不是很好理解使用，列举几个实现效果。

基础概念使用

MDN中简单的介绍了它的概念。

元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block（最近块级祖先 nearest block-level ancestor），包括 table-related 元素，基于 top、right、bottom 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。 该值总是创建一个新的层叠上下文（stacking context）。注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 overflow 是 hidden、scroll、auto 或 overlay 时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为

简单来说，就是以下几点：

  • 如果父元素position不是static，就会根据父元素定位，如果不是，往上查找滚动的非标准元素（position不是static）
  • 这个元素本身是标准流的元素，类似static
  • 当设置了top/bottom/left/right，会在到达指定偏移量后浮动，类似fixed

相对于底部浮动

设置相对于顶部只需要设置top，在可视区域内，向下滚动，父元素相对可视区域顶部消失时，粘性定位元素就会生效。

如果想要针对实现，父元素相对可视区域底部出现，固定显示需要一点技巧。

演示

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<style>
    .box {
        width: 100%;
        height: 2000px;
        background: skyblue;
        border: 1px solid red;
        position: relative;
    }

    .sticky {
        position: sticky;
        bottom: 0px;
    }

    .content {
        width: 100%;
        background: yellowgreen;
        border: 1px solid saddlebrown;
        position: absolute;
        bottom: 20px;
        box-sizing: border-box;
    }
</style>
<div style="height: 200px;"></div>
<div class="box">
  <div style="height: 100%;"></div>
  <div class="sticky">
    <div class="content">
      这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字
    </div>
  </div>
</div>
<div style="height: 800px;"></div>

固定底图文字从底部向上滑动

全屏背景图，向上滑动时，文字从底部移动至中间。

演示

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<style>
    /* 加上 -webkit- 注意兼容 */
    h1 {
    background: -webkit-linear-gradient(135deg,
        #0eaf6d,
        #ff6ac6 25%,
        #147b96 50%,
        #e6d205 55%,
        #2cc4e0 60%,
        #8b2ce0 80%,
        #ff6384 95%,
        #08dfb4);
        /* 文字颜色填充设置为透明 */
        -webkit-text-fill-color: transparent;
        /* 背景裁剪，即让文字使用背景色 */
        -webkit-background-clip: text;
        /* 背景图放大一下，看着柔和一些 */
        -webkit-background-size: 200% 100%;
        /* 应用动画flowCss 12秒速度 无限循环 线性匀速动画*/
        -webkit-animation: flowCss 12s infinite linear;
    }

    @-webkit-keyframes flowCss {
    0% {
        /* 移动背景位置 */
        background-position: 0 0;
    }

    100% {
        background-position: -400% 0;
    }
    }

    h1:hover {
        animation: flowCss 4s infinite linear;
    }

    .banner-wrap {
        width: 100%;
        /* 需要设置大于一屏的高度，多余的高度用来承载滚动的文字 */
        height: 180vh;
        position: relative;
    }

    .banner-sticky-box {
        width: 100%;
        /* 一定要设置为一屏的高度 */
        height: 100vh;
        position: sticky;
        top: 0;
        transition: 0.1s;
        /* background: skyblue; */
        background: url('https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png');

        text-align: center;
    }

    .banner-scrollytxt {
        width: 60%;
        max-width: 640px;
        position: absolute;
        bottom: 50vh;
        left: 50%;
        transform: translate(-50%, 50%);
        text-align: center;
        z-index: 12;
    }
    .other{
        height:200px;
        background: #f2f2f2;
    }

</style>
<div class="banner-wrap">
  <div class="banner-sticky-box">
    <!-- 可以放置图片之类背景图 -->
    <h1>Title</h1>
  </div>
  <div class="banner-scrollytxt">
    <!-- 放置滚动显示的文字，任意内容均可，标准流为父盒子减去100vh的高度，这里是180-100=80vh -->
    <h1>文字颜色渐变流光效果</h1>
    <!-- 思路就是 文字颜色填充为透明、背景裁剪让文字使用背景色、然后设置一个渐变背景色
                再放大一下背景，最后通过动画移动背景位置，于是效果就出来了 -->
  </div>
</div>
<div class="other"></div>
------本文结束 感谢阅读------