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

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

苏南大叔:css代码,如何使用position: sticky粘性定位实现吸顶效果? - sticky定位
css代码,如何使用position: sticky粘性定位实现吸顶效果?(图3-1)

大家好,这里是苏南大叔的平行空间笔记本博客,记录苏南大叔和一些计算机代码的故事。本文描述csssticky粘性定位。测试环境:chrome

理解粘性定位

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

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

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

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

position: sticky;
top: 0px;

特性体现的三大前提要点

  • 粘性元素【必须】连带定义topbottomleftrigth中的一个【或多个】。
  • 定义的粘性元素【必须】有个外部容器,才能体现其特性。stickytop等属性就是针对这个容器定义的!
  • 外部容器【必须】能够产生滚动,比如足够的高度等,才能触发由reltivefixed这两种状态的相互转化。

苏南大叔:css代码,如何使用position: sticky粘性定位实现吸顶效果? - 效果一
css代码,如何使用position: sticky粘性定位实现吸顶效果?(图3-2)

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

<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>

苏南大叔:css代码,如何使用position: sticky粘性定位实现吸顶效果? - 效果二
css代码,如何使用position: sticky粘性定位实现吸顶效果?(图3-3)

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

相关链接

总结

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

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css