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、 父级 及 其 祖先元素 高度 与其 一样高，是没有效果的。