问题描述

移动端存在这样的问题，要实现页面滚动时title能够根据滚动位置动态悬浮在页面顶部，通过js监听页面scroll事件实现的效果，会出现延迟触发的情况（上滑或下滑时手指离开屏幕后会有一段距离的缓冲，当缓冲结束后才触发scroll事件），体验上会造成页面已经过了标题的位置但是标题还没有归位。

解决思路

用iscroll替换原生滚动事件，能缓解问题，延迟事件缩短很多，但还是不能根除

最近发现一个css的新特性position:sticky;

能通过css样式来解决上述问题，效果很好，但是浏览器支持欠佳，不过是趋势。这里是支持sticky的浏览器（只有火狐和ios支持）；但使用粘性布局时候要注意：父级元素不能使用overflow: hidden（x,y任何一个都不行）否则会造成粘性布局失效 。

js实现粘性布局要注意：

1. 闪动，悬浮的元素变成fixed时，原区域要有占位，不然会出现页面突然向上“跳一下”；
   解决办法是，js动态的在要悬浮的元素外面包一层父元素，并将悬浮元素的占位高度赋值给父元素，这样就不会影响页面的体验。

2. 位置获取，初始化就获取要浮动元素的距顶部位置是不准确的。当顶部有图片未加载完，或高度改变的时候，元素距顶部的位置是发生变化的，所以位置获取是要有时机的；
   解决办法是，滚动时获取 父级 元素距页面顶部的距离并缓存