sticky尝鲜

该文章发布于 ,归类于 HTML/CSS

众所周知,css中的position代表的是定位的方式,它有relativeabsolutestaticfixed几个常见的属性。本文要说说它另外的一个属性sticky,所谓的粘性布局。

什么是粘性布局?可以看一个如下的动图示例

每次文字滚动到顶部,会自动吸附在顶部位置,就好像是带有粘性似的,这种布局方式可以通过sticky来实现。

首先来看一下这个属性的兼容性,有点不容乐观啊。不过既然是尝鲜,那就先尝鲜玩玩咯。

如下一段代码,实现上述gif图中的效果。你要把每一个滚动的元素设置为sticky定位,这样它就具有了粘性,同时,还要设置lefttoprightbottom这四个值其中的一个,表示其粘性附着的位置在哪。

<style>
  * {
    margin: 0;
    padding: 0;
  }

  ul {
    margin: 0 auto;
    list-style: none;
  }

  ul li {
    height: 500px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    text-align: center;
    background: linear-gradient(to bottom, #ff4e22, #d0ff1c, #ff21f1);
  }
</style>
<div>
  <ul>
    <li>title1</li>
    <li>title2</li>
    <li>title3</li>
    <li>title4</li>
    <li>title5</li>
  </ul>
</div>

在此查看代码运行效果

See the Pen EeEgxg by Leevare (@leevare) on CodePen.

需要注意

使用sticky定位时,一定设置lefttoprightbottom这四个值其中的一个,否则其将会按照relative显示。

其次,其父节点必须是overflow: visible的,否则也不生效。

最后,这个属性的兼容性着实堪忧,在不支持该属性的浏览器中,可以考虑使用position: fixed来达到同样的效果,不过要配合js来检测滚动,在合适的时机,添加与移除position:fixed属性即可。

const body = document.implementation.createHTMLDocument("").body
body.style.position = 'sticky'
if (body.style.position !== 'sticky') {
  //滚动监听
}

具体的实现细节,这里就不展开了。

相关文章