position:sticky 的使用

demo

如果你想想做这样一个滚动跟随。那你肯定第一时间想到的一定是position:fixed;这个css 属性,然后加上一段js 的代码。

这个方式是可以的对于pc 浏览器和Android 浏览。但是对于ios 设备上的浏览器来说,它是不好的,它的反应会很慢,当你的滚动已经达到了你想要它浮起来的时候,它却没有,超出好多才浮到顶部。当然这并非是你因你的js  代码写的不够好。

此时,你就应该用position:sticky这个样式了。

你只需要这样做:

判断浏览器是否支持sticky  这个属性,如果支持,给想要浮动跟随的 DOM 加上


这样一个样式就好了,不需要js 代码。

不支持的设备你就需要用  position:fixed; 的了,然后加上js 的判断代码,这里就不说js 代码了。

一个判断是否支持sticky 的方式:



由此图可以看出也并不是所有的Android  设备不支持  ,ios 设备也并非全部支持。所以根据设备来判断,可能有误差。可以说高级浏览器是支持。

备注:

1、 使用sticky 样式的 元素  的  父级 及 其 祖先元素 的 overflow  得是  默认的 visible;

2、 父级 及 其 祖先元素 高度 与其 一样高,是没有效果的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,862评论 1 92
  • 如果你想想做这样一个滚动跟随。那你肯定第一时间想到的一定是 position:fixed; 这个css 属性,然后...
    Northerner阅读 4,652评论 0 0
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,275评论 0 1
  • 不仅仅是为你照亮黑暗,还是一个精分现场 人们对「灯」的认知,大多的停留在「照明」 虽然在装修时会考虑到装饰作用 但...
    最美有物专栏阅读 434评论 0 0
  • 第一章 第二节 启程 第二日早晨,路德维希如约来到了天国与人世相通的其中一条路径——直查者大堂。 路德维希...
    默若与共阅读 169评论 0 0