標(biāo)題比較讓人費(fèi)解，大概效果就是現(xiàn)在越來(lái)越多的看到網(wǎng)站里添加的隨頁(yè)面滾動(dòng)的模塊。比如我這里的頭部就是，當(dāng)然有時(shí)候，效果會(huì)更好一些，比如一般時(shí)候固定在某處，頁(yè)面滾動(dòng)使這個(gè)元素滾出顯示邊界之后，為了方便讀者（或者展示廣告），就把這個(gè)模塊變成隨頁(yè)面滾動(dòng)的。測(cè)試了一下效果還不錯(cuò)（當(dāng)然IE6去死）。

很久沒寫過代碼分享文章了。這里先說(shuō)一下方法：獲取元素（這里定位元素A）距離頂部的高度，接著設(shè)定scroll滾動(dòng)的事件，比如超過那個(gè)高度，把A的位置設(shè)定為fixed，小于該高度，修改回relative。這里借zww大叔個(gè)圖，如下（當(dāng)然大叔不是這么弄的，不過效果類似）：

下面是代碼。

var scroller_anchor = jQuery(".scroller").offset().top;
jQuery(window).scroll(function() {
  if (jQuery(this).scrollTop() >= scroller_anchor && jQuery('.scroller').css('position') != 'fixed') {
   jQuery('.scroller').css({
    'position': 'fixed',
    'margin-top': '0'
   });
  } else if (jQuery(this).scrollTop() < scroller_anchor && jQuery('.scroller').css('position') != 'relative') {
   jQuery(".scroller").css({
    'margin-top': '10px',
    'position': 'relative'
   });
  }
});

但是，有時(shí)候這樣的方式會(huì)有問題，比如元素A上面有動(dòng)態(tài)增長(zhǎng)（縮短）的元素（比如突然js寫入了一個(gè)東東），這樣第一次獲取的高度就不再合適。這樣就需要設(shè)定一個(gè)錨點(diǎn)（這里設(shè)定為class id為scroller_anchor的div元素）（經(jīng)zww大叔提醒將class改為ID）。代碼如下：

jQuery(window).scroll(function() {
 if(jQuery("#content").find("#scroller_anchor").length > 0){
  var scroller_anchor = jQuery("#scroller_anchor").offset().top;
  if (jQuery(this).scrollTop() >= scroller_anchor && jQuery('.scroller').css('position') != 'fixed') {
   jQuery('.scroller').css({
    'position': 'fixed',
    'margin-top': '0'
   });
  jQuery("#scroller_anchor").css('height', '36px');
  } else if (jQuery(this).scrollTop() < scroller_anchor && jQuery('.scroller').css('position') != 'relative') {
   jQuery("#scroller_anchor").css('height', '0px');
   jQuery(".scroller").css({
    'margin-top': '10px',
    'position': 'relative'
   });
  }
 }
});

上面用到的完整的html代碼如下：

<div id="main-content">
 <div id="scroller_anchor" style="height: 0px; "></div>
 <div class="scroller">
  ......
 </div>
</div>

至于具體的css，請(qǐng)自己根據(jù)需要設(shè)定吧。

文章來(lái)源：Axiu’s blog