div層随屏幕滾動遇頂固定的(de)智能浮動效果 下(xià)載相應代碼
智能浮動效果的(de)實現原理(lǐ)
它分(fēn)兩種狀态，一是默認狀态，二是浮動固頂狀态。
默認狀态就是默認狀态，什(shén)麽也(yě)不用(yòng)做(zuò)，保持原有的(de)CSS就好。無論有沒有對(duì)它做(zuò)定位，做(zuò)了(le)absolute也(yě)好，沒做(zuò)也(yě)好，都行。
關鍵是當浏覽器屏幕滾動時(shí)，該對(duì)象div層要移除浏覽器界面視區(qū)的(de)時(shí)候，是要修改它的(de)position屬性，讓它浮動在窗(chuāng)口的(de)上沿顯示就行了(le)。最好的(de)position屬性是fixed，可(kě)以在IE6+和(hé)其他(tā)浏覽器浮動層平滑的(de)固定定位，由于IE6老大(dà)哥(gē)不支持fixed屬性，所以可(kě)以另外賦予它absolute屬性。當然也(yě)會産生副作用(yòng)——滾動不平滑。不過也(yě)無所謂了(le)，在微軟公布不再修補更新XP漏洞，在中國360安全衛士的(de)幫助下(xià)雖然大(dà)家仍然使用(yòng)XP，但IE的(de)用(yòng)戶已經是少之又少了(le)。
那接下(xià)來(lái)，如何判斷當前div層與浏覽器窗(chuāng)口的(de)上邊緣接觸了(le)呢(ne)？遇到浏覽器頂部了(le)呢(ne)？
當浮動層div與浏覽器窗(chuāng)口上邊緣接觸的(de)一瞬間，其頁面垂直偏移值與頁面的(de)滾動高(gāo)度是一緻的(de)，所以我們就用(yòng)這(zhè)個(gè)進行判斷。那如何獲得(de)頁面上元素距離頁面的(de)垂直距離呢(ne)？
這(zhè)裏則是使用(yòng)javaScript庫實現。
1、第一種實現div層智能浮動的(de)方法
具體代碼如下(xià)：
$.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)); });};調用(yòng)其實很簡單，将需要浮動的(de)目标層div所設定的(de)id，添加到以下(xià)函數代碼，如下(xià)：
$("#fixed").smartFloat();這(zhè)樣兩段代碼就可(kě)以實現ID爲fixed的(de)層有了(le)智能浮動效果，當該層在頁面滾動時(shí)，與浏覽器上邊緣接觸時(shí)就會固定頂部，不再跟随滾動條而滾動了(le)。當滾動回上面時(shí)，又會還(hái)原成原有狀态。當然，别忘記在頁面head之前調用(yòng)jquery庫呀。具體代碼與壓縮包請在文章(zhāng)末尾下(xià)載！
2、第二種實現div層的(de)智能浮動效果辦法
與前面的(de)方法差不多(duō)，隻是語句更簡單一些，當然邏輯上是沒有這(zhè)麽嚴謹吧。
function scrollLis(){var toTop = offs.top-$(window).scrollTop();if(toTop==0||toTop<0){ if(!$('#fixed').hasClass('ab'))$('#fixed').addClass('ab');}else{ $('#fixed').removeClass('ab');}}它的(de)調用(yòng)就多(duō)了(le)幾句代碼了(le)，同樣是放在層的(de)後面，以ID标簽fixed爲名：
var offs=$('#fixed').offset();$(window).scroll(function(){scrollLis();});
以上兩種方法我們都在不同的(de)浏覽器下(xià)測試通(tōng)過，包括了(le)360安全浏覽器、搜狗、火狐、IE6~9、遨遊等等。
