萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 用jquery設定始終顯示(隨頁面滾動)的元素

用jquery設定始終顯示(隨頁面滾動)的元素

標題比較讓人費解,大概效果就是現在越來越多的看到網站裡添加的隨頁面滾動的模塊。比如我這裡的頭部就是,當然有時候,效果會更好一些,比如一般時候固定在某處,頁面滾動使這個元素滾出顯示邊界之後,為了方便讀者(或者展示廣告),就把這個模塊變成隨頁面滾動的。測試了一下效果還不錯(當然IE6去死)。

很久沒寫過代碼分享文章了。這裡先說一下方法:獲取元素(這裡定位元素A)距離頂部的高度,接著設定scroll滾動的事件,比如超過那個高度,把A的位置設定為fixed,小於該高度,修改回relative。這裡借zww大叔個圖,如下(當然大叔不是這麼弄的,不過效果類似):

用jquery設定始終顯示(隨頁面滾動)的元素 三聯教程

下面是代碼。

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'
   });
  }
});

但是,有時候這樣的方式會有問題,比如元素A上面有動態增長(縮短)的元素(比如突然js寫入了一個東東),這樣第一次獲取的高度就不再合適。這樣就需要設定一個錨點(這裡設定為class id為scroller_anchor的div元素)(經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'
  &nbs
copyright © 萬盛學電腦網 all rights reserved