首先，应用展示了图层的智能浮动效果。早在几年前我就在国外一些个人网站的垂直导航上看到过，现在看来这种效果在国内一些商业网站上也是经常看到的，比如淘宝搜索结果页面的排序横条。默认情况下，滚动条随页面滚动，如下所示：。

当页面向下滚动时，当横条接触到浏览器的上边缘时，横条是独立的，不跟随滚动条，如下图所示：。

新浪微博上也存在类似的效果：。

当页面滚动，新的动态提示开始淡出浏览器窗口时，它会浮动在浏览器窗口的上边缘，如下图所示：。

实现这种效果的原理其实很简单，所以本文将展示它的实现。二、默认状态的实现原则就是默认状态，什么也不用做，定位是绝对的还是静态的，都ok。关键是当浏览器滚动，对象(要浮动的图层)需要移除浏览器界面的视口时，修改其position属性，让其浮动在窗口的上边缘。最佳位置属性是固定的，可以在IE6等浏览器下平滑固定定位浮动层。既然IE6前辈不支持固定属性，退一步用绝对属性代替，但会有——的副作用。但是，没有办法做到这一点。现在关键是如何判断当前图层与浏览器窗口顶边的接触。当浮动层接触到浏览器窗口的上边缘时，页面的垂直偏移值实际上与页面的滚动高度是一致的，以此来判断是可以的，但是如何得到页面上元素与页面的垂直距离呢？对于纯js代码来说，获取这个值相当麻烦。幸运的是，JavaScript库帮助我们解决了这些任务，所以我们的工作实际上非常顺利。这里我们将展示如何在jQuery库和MooTools库下实现这种效果。3.jQuery下图层智能浮动方法的代码如下：复制代码的代码如下： $ . fn . smart float=function(){ var position=function(element){ var top=element。位置()。顶部，位置=元素。CSS('位置')；$(窗口)。scroll(function(){ var scrolls=$(this))。scroll top()；if(向上滚动){ if(窗口。XMLHttpRequest){ element . CSS({ position : ' fixed '，top : 0 })；} else { element . CSS({ top : scrolls })；} } else { element . CSS({ position : ' absolute '，top : top })；} });};返回$(这个)。每个(函数(){ position($(this))；});};调用很简单，只要一行代码就可以了，比如下面：$('#float ')。smartFloat()；完美，id float的标签具有短绑定的智能浮动功能，效果描述是当id float的元素在滚动过程中接触到浏览器的上边缘时，将不再跟随滚动条。可以用力点击这里：jQuery下图层的智能浮动演示打开演示页面，右边会看到自称浮动的图层。滚动页面观察效果：。

四、MooTools下的层的智能浮动

与框架实现一样，MooTools库下也已经将此方法包装了起来，代码如下：复制代码代码如下： var $ smartFloat=函数(元素){ var position=函数(元素){ var top=元素。getposition().y，pos=元素。getstyle(' position ')；window.addEvent('scroll '，function(){ var scrolls=this。getscroll().y；如果(向上滚动){ if(窗口. XMLHttpRequest){元素。setstyle({ position : ' fixed '，top : 0 })；} else { element。setstyle({ top : scrolls })；} } else { element。setstyle({ position : ' absolute '，top : top })；} });};if($ type(elements)=' array '){ return elements。每个(功能(项目)){位置(项目)；});} else if($ type(elements)=' element '){ position(elements)；} };使用也是非常的简单，就一句代码，同样以编号为漂浮物的标签举例，代码如下：$ smartFloat($(' float '))；您可以狠狠地点击这里：MooTools下的层的智能浮动演示滚动演示页面的滚动条，当"羞涩"的浮动层与浏览器边缘"接触"的时候，就不再跟随滚动条滚动了，如下图所示

来自张鑫旭