一、遇頂固定的例子
我一直以為是某個div或層隨屏幕滾動，遇頂則固定，離開瀏覽器頂部又還原這樣的例子其實不少，其實它的名字叫“層的智能浮動效果”。目前我們在國內的商業網站上就常常看到這樣的效果了。例如淘寶網的搜索結果頁的排序水平條，在默認狀態時，該工具條是跟隨頁面滾動的，如下圖：
而當我們下拉滾動條，隨着頁面向下滾動，當此工具條接觸到瀏覽器的上邊緣時，這時就會獨立出來固定在頂部，不跟隨頁面滾動而滾動了，如下圖：
類似的例子效果我們在別的網站上都有看到過，例如騰訊微博首頁上，當我們下拉屏幕瀏覽最新微博時，工具條也會出現這個效果，如下圖：
這個效果看上去方便，貼心，也許還帶推動廣告的促銷呢。原理其實很簡單，本文展示兩種方法。
二、智能浮動效果的實現原理
它分兩種狀態，一是默認狀態，二是浮動固頂狀態。
默認狀態就是默認狀態，什么也不用做，保持原有的CSS就好。無論有沒有對它做定位，做了absolute也好，沒做也好，都行。
關鍵是當瀏覽器屏幕滾動時，該對象div層要移除瀏覽器界面視區的時候，是要修改它的position屬性，讓它浮動在窗口的上沿顯示就行了。最好的position屬性是fixed，可以在IE6+和其他瀏覽器浮動層平滑的固定定位，由於IE6老大哥不支持fixed屬性，所以可以另外賦予它absolute屬性。當然也會產生副作用——滾動不平滑。不過也無所謂了，在微軟公布不再修補更新XP漏洞，在中國360安全衛士的幫助下雖然大家仍然使用XP，但IE的用戶已經是少之又少了。
那接下來，如何判斷當前div層與瀏覽器窗口的上邊緣接觸了呢？遇到瀏覽器頂部了呢？
當浮動層div與瀏覽器窗口上邊緣接觸的一瞬間，其頁面垂直偏移值與頁面的滾動高度是一致的，所以我們就用這個進行判斷。那如何獲得頁面上元素距離頁面的垂直距離呢？
這里則是使用javaScript庫實現。
三、第一種實現div層智能浮動的方法
具體代碼如下：
$.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: pos,
top: top
});
}
});
};
return $(this).each(function() {
position($(this));
});
};
調用其實很簡單，將需要浮動的目標層div所設定的id，添加到以下函數代碼，如下：
$("#fixed").smartFloat();
這樣兩段代碼就可以實現ID為fixed的層有了智能浮動效果，當該層在頁面滾動時，與瀏覽器上邊緣接觸時就會固定頂部，不再跟隨滾動條而滾動了。當滾動回上面時，又會還原成原有狀態。當然，別忘記在頁面head之前調用jquery庫呀。具體代碼與壓縮包請在文章末尾下載！
四、第二種實現div層的智能浮動效果辦法
與前面的方法差不多，只是語句更簡單一些，當然邏輯上是沒有這么嚴謹吧。
function scrollLis(){
var toTop = offs.top-$(window).scrollTop();
if(toTop==0||toTop<0){
if(!$('#fixed').hasClass('ab'))$('#fixed').addClass('ab');
}else{
$('#fixed').removeClass('ab');
}
}
它的調用就多了幾句代碼了，同樣是放在層的后面，以ID標簽fixed為名：
var offs=$('#fixed').offset();
$(window).scroll(function(){
scrollLis();
});
以上兩種方法我們都在不同的瀏覽器下測試通過，包括了360安全瀏覽器、搜狗、火狐、IE6~9、遨游等等。
你可以點擊這里下載相應的代碼：div層隨屏幕滾動遇頂固定的智能浮動效果 http://www.seo0763.net/uploads/soft/div-follow-web-totop.rar
五、結語
已經很久沒有寫這些效果與實例文章了，好多項目都在嘗試當中，時間也是過得飛快。也只有當遇到問題需要解決時，才在收集資料、學習研究后才分享出來。
當然我們的能力有限，資歷很淺，這些方法僅供參考。或者有別的更好的更簡潔更快速的方法，也歡迎大家分享給我們。本文屬於原創文章，由英德網站建設http://www.seo0763.net提供，轉載請注明出處。
來源:http://blog.sina.com.cn/s/blog_a438a4be0101spft.html
demo在本博客“上傳文件”中