css- sticky

  • 有时候我们有需求需要开始有一行在页面上,然后页面滚动到需要展示的一行下面时,把展示一行固定到顶部,滚动回去,固定行又回到文档中。类似淘宝里面的服装、鞋履、箱包这种分类导航。

  • 以前实现使用的监听滚动事件,判断滚动到固定行下面的时候,添加fixed。实现置顶。

*现在css有个position: sticky;可以实现。需要配合 top,right,bottom, left才能生效。没有的话,只算realtive效果。

以下是代码:




   
   
   
   Document



   
dlkjfdsljfskdj
dlkjfdsljfskdj
dlkjfdsljfskdj
dlkjfdsljfskdj
dlkjfdsljfskdj
我是sticky行
k3n4423423432
k3n4423423432
k3n4423423432
k3n4423423432
k3n4423423432
k3n4423423432
k3n4423423432
k3n4423423432
k3n4423423432
k3n4423423432
k3n4423423432
k3n4423423432
k3n4423423432
k3n4423423432
k3n4423423432
k3n4423423432
k3n4423423432
k3n4423423432
k3n4423423432
k3n4423423432

滚动前:


屏幕快照 2019-11-19 上午10.05.50.png

滚动下面:


屏幕快照 2019-11-19 上午10.06.46.png

Can I Use:

屏幕快照 2019-11-19 上午10.07.23.png

你可能感兴趣的:(css- sticky)