Sticky定位

Author : lovecicy

先来看个例子,在Safari或者火狐下打开哦: See the Pen CSS Sticky headers by YuC (@yuuuuc) on CodePen. 或者再看个例子:HTML5Rocks 先来解释下sticky定位的作用是什么:当用户滚动到某一位置时,某个元素就固定在页面上了。 这样的场景非常常见,比如iOS或者安卓的联系人,当你滚动时,对应的字母总在最顶端,当下一个字母上来时,会将前一个字母顶上去;或者BootStrap的文档页面,初始状态下,右边的菜单会随页面滚动而滚动,但是当菜单顶部滚动到页面顶部时,再往下滚,菜单就固定在页面顶部了。 通常(现在),我们的做法是使用js来监听用户的滚动事件,当滚动到某一高度,就将特定的元素设置为position:fixed。类似下面的做法: 这样的做法非常简单,但是如果你要对非常多的元素进行这样的操作,那将会是灾难性的。 为什么JS的做法不够好呢? Something else to consider is that more and more browsers are implementing hardware acceler[Read More]

standard