jquery实现div层随页面滚动而滚动（固定在某一位置）

翻看ipc.me时觉得右侧的slider会随着页面下翻而始终浮动在窗口边沿下，体验很不错，在张鑫旭的博客中一篇文章的借鉴下，成功实现这样一个功能，代码如下（基于jquery实现，所以事先要在页面中导入jquery文件）：

<script type='text/javascript'>$.fn.smartFloat = function() { var position = function(element) {var top = element.position().top, pos = element.css('position');$(window).scroll(function() { var scrolls = $(this).scrollTop(); if (scrolls > top) {if (window.XMLHttpRequest) { element.css({position: 'fixed',top: 0 }); } else { element.css({top: scrolls }); } }else {element.css({ position: 'absolute', top: top});}}); }; return $(this).each(function() {position($(this)); });};$('要浮动的层id或class').smartFloat();</script>

跟原作者说的一样，我也是妥妥的实现了这一功能，当然是在chrome下，IE没有测试，应该也是可以的，实现的原理如下（最好是看一下，了解原理，就站在了制高点看问题，一览众山小）：

默认状态就是默认状态，什么事情也不用做，定位是absolute也好，static也好，都ok。关键是当浏览器滚动的时候，对象（要浮动的层）要移除浏览器界面视区的时候，修改其position属性，让其浮动在窗口的上沿显示就可以了。最好的position属性就是fixed了，可以在IE6+和其他浏览器下浮动层平滑固定定位，由于IE6前辈不支持fixed属性，所以，后退一步，使用absolute属性代替，但是会有副作用——滚动不平滑。但，这也是没有办法的事情了。

现在关键就是如何判断当前层与浏览器窗口的上边缘接触呢？当浮动层与浏览器窗口上边缘接触的一瞬间，其页面垂直偏移值与页面的滚动高度其实是一致的，所以，用这个进行判断就OK了，但是，如何获得页面上元素距离页面的垂直距离呢？纯粹的js代码获得此值还是比较麻烦的，好在JavaScript库jQuery帮我们解决了这些工作。