翻看ipc.me時覺得右側(cè)的slider會隨著頁面下翻而始終浮動在窗口邊沿下，體驗很不錯，在張鑫旭的博客中一篇文章的借鑒下，成功實現(xiàn)這樣一個功能，代碼如下（基于jquery實現(xiàn)，所以事先要在頁面中導入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>

跟原作者說的一樣，我也是妥妥的實現(xiàn)了這一功能，當然是在chrome下，IE沒有測試，應該也是可以的，實現(xiàn)的原理如下（最好是看一下，了解原理，就站在了制高點看問題，一覽眾山小）：

默認狀態(tài)就是默認狀態(tài)，什么事情也不用做，定位是absolute也好，static也好，都ok。關(guān)鍵是當瀏覽器滾動的時候，對象（要浮動的層）要移除瀏覽器界面視區(qū)的時候，修改其position屬性，讓其浮動在窗口的上沿顯示就可以了。最好的position屬性就是fixed了，可以在IE6+和其他瀏覽器下浮動層平滑固定定位，由于IE6前輩不支持fixed屬性，所以，后退一步，使用absolute屬性代替，但是會有副作用——滾動不平滑。但，這也是沒有辦法的事情了。

現(xiàn)在關(guān)鍵就是如何判斷當前層與瀏覽器窗口的上邊緣接觸呢？當浮動層與瀏覽器窗口上邊緣接觸的一瞬間，其頁面垂直偏移值與頁面的滾動高度其實是一致的，所以，用這個進行判斷就OK了，但是，如何獲得頁面上元素距離頁面的垂直距離呢？純粹的js代碼獲得此值還是比較麻煩的，好在JavaScript庫jQuery幫我們解決了這些工作。