翻看ipc.me時(shí)覺得右側(cè)的slider會(huì)隨著頁面下翻而始終浮動(dòng)在窗口邊沿下，體驗(yàn)很不錯(cuò)，在張?chǎng)涡竦牟┛椭幸黄恼碌慕梃b下，成功實(shí)現(xiàn)這樣一個(gè)功能，代碼如下（基于jquery實(shí)現(xiàn)，所以事先要在頁面中導(dǎo)入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)); });};$('要浮動(dòng)的層id或class').smartFloat();</script>

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

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

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