css代码，如何使用position: sticky粘性定位实现吸顶效果?

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

苏南大叔在本文中描述一下css的position定位中的sticky粘性定位。如何理解粘性定位呢？什么是粘性定位呢？这就是本文中要主要讨论的问题。

大家好，这里是苏南大叔的程序如此灵动博客，记录苏南大叔和一些计算机代码的故事。本文描述css的sticky粘性定位。测试环境：chrome。

理解粘性定位

这里苏南大叔先对这个粘性定位，做个具象化的解释。

解释一：一个固定的盒子（显示器视口）里面穿过一条轨道（滚动条），一个史莱姆（粘性元素）粘在轨道上，轨道运动的同时盒子不动，最终史莱姆卡在了盒子上。

解释二： 然后用比较科学的方式，再解释一次。就是：sticky=relative+fixed。有的时候，相当于relative，有的时候相当于fixed。众所周知，定位为fixed的话，就需要加上具体的位置信息，比如：top、bottom、left、rigth之类的。那么，sticky这个变体，也需要上述top、bottom等数值属性。

最普通的场景就是：一个sticky定位的元素，放在一个普通的容器内。随着页面的滚动，sticky元素的定位表现，由relative变成fixed，转换的临界点就是定义的top、bottom等类似的数值属性。

position: sticky;
top: 0px;

特性体现的三大前提要点

• 粘性元素【必须】连带定义top、bottom、left、rigth中的一个【或多个】。
• 定义的粘性元素【必须】有个外部容器，才能体现其特性。sticky的top等属性就是针对这个容器定义的！
• 外部容器【必须】能够产生滚动，比如足够的高度等，才能触发由reltive和fixed这两种状态的相互转化。

下面的是苏南大叔编写的测试代码，大家可以根据上述三大要素来进行修改体会。代码如下：

<div class="header">苏南大叔的网站</div>
<div class="article">
  <h2 class="title">文章标题，sticky粘性定位</h2>
  <div class="content">正文内容</div>
  <div class="title2">用于对比的fixed元素</div>
</div>
<style>
  html,
  body {
    padding: 0px;
    margin: 0px;
  }
  .header {
    height: 80px;
    background: rgb(252, 49, 13);
  }
  .content {
    height: 1000px;
    background: gray;
  }
  .title,
  .title2 {
    background-color: #fff;
    border: 1px solid black;
    top: 10px;
  }
  .title {
    position: sticky;
  }
  .title2 {
    position: fixed;
    background: blue;
    left: 30%;
  }
</style>

以最常见的设置top属性为例，top是相对于页面整体来说的，当粘性元素的实际文档流位置比top大的时候，那么就是fixed，否则就是relative。页面的滚动会改变元素的位置，那么fixed元素的实际距离比top小的时候，就会变为relative。

相关链接

• https://newsn.net/say/css-background-position-x.html
• https://newsn.net/say/css-marker.html

总结

从上面的文字及范例里面，可以看到：这个css的position:sticky实际上就是个容器内部的pin效果。很多年前，有个jquery.pin.js就是实现这个效果的。大家有兴趣的话，可以搜索对比看看两者的区别。

• https://newsn.net/tag/css/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。