DIV模块层在页面滚动时固定于顶部的两种实现方式（JS和jQuery）

简介：
本文介绍了如何使用JavaScript和jQuery使网页中的DIV模块在页面滚动到特定位置时固定在顶部的方法与技巧。 一、遇顶固定的例子 我一直以为“遇顶固定”是指某个div或层随着屏幕滚动，在到达顶部后保持固定位置，离开浏览器顶部则恢复原状。实际上这种效果被称为“智能浮动效果”。在国内商业网站上经常可以看到这样的设计，比如淘宝网的搜索结果页排序水平条：在默认状态下，这个工具条会随页面一起滚动；然而当用户向下滚动屏幕并使该工具条触碰到浏览器的顶端时，它就会固定于顶部不再随页面滚动。这种智能浮动效果也被广泛应用于其他网站中，例如腾讯微博首页，在浏览最新动态的过程中也会看到类似的效果。 二、实现原理 “遇顶固定”功能主要包含两个状态：默认状态下无需特别处理；当层与浏览器上边缘接触时，则需要改变其position属性来保持在顶部。最佳的position值是fixed，这可以在所有现代浏览器中提供平滑固定的定位效果。然而由于IE6不支持这个属性，因此在这种情况下可以使用absolute代替，但可能会导致滚动体验不如预期流畅。 为了判断div层是否已经触碰到窗口上边缘，我们需要比较页面垂直偏移量与滚动高度之间的关系：当两者相等时即表示已接触到了浏览器顶部。获取页面元素距离顶部的距离值可以通过JavaScript库实现。