• 您現在的位置： 創(chuàng)新互聯 >> 網站建設 >> 網絡建設常見問題 >> jQuery 隨滾動條滾動效果代碼

jQuery 隨滾動條滾動效果代碼

• 作者：曾小姐 文章來源：成都網站建設 點擊數：2161 更新時間：2012-06-28
• 下面由成都創(chuàng)新互聯網站建設分享兩款關于jQuery隨滾動條滾動代碼，一個適用于固定版長度的文章，一個適用于內容頁長文章，有需要的朋友可能參考參考哦，您也可以登錄我們的論壇（http://bbs.cdxwcx.com）來和更多的網站愛好者進行交流！
  jQuery 隨滾動條滾動效果 （固定版）
  代碼（基于jQuery）：

  代碼如下

  //側欄隨動 var rollStart = $('.feed-mail'), //滾動到此區(qū)塊的時候開始隨動  rollSet = $('.search,.weibo,.group,.feed-mail,.tags'); //添加rollStart之前的隨動區(qū)塊 rollStart.before('<div class="da_rollbox" style="position:fixed;background-color:#fff;width:inherit;"></div>'); var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev(); objWindow.scroll(function() {  if (objWindow.scrollTop() > offset.top){   if(rollBox.html(null)){    rollSet.clone().prependTo('.da_rollbox');   }   rollBox.show().stop().animate({top:0,paddingTop:15},400);  } else {   rollBox.hide().stop().animate({top:0},400);  } });

  比上個更簡單了，請留意注釋的地方，是需要根據你的需求添加模塊class或者id的。值得注意的是第五行的背景色，默認是白色！

  Tips：IE6的粉絲可以加些不支持fixed的代碼

  jQuery 隨滾動條滾動效果 （適用于內容頁長文章）
  jQuery滾動隨動區(qū)塊，代碼如下：

  代碼如下

  //側欄隨動 var rollStart = $('.feed-mail'), //滾動到此區(qū)塊的時候開始隨動  rollOut = $('.cookie-list'); //隱藏rollStart之后的區(qū)塊 rollStart.before('<div class="da_rollbox"></div>'); var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev(),  rollSet = $('.search,.weibo,.group'); //添加rollStart之前的隨動區(qū)塊 objWindow.scroll(function() {  if (objWindow.scrollTop() > offset.top){   if(rollBox.html(null)){    rollSet.clone().prependTo('.da_rollbox');   }   rollOut.fadeOut();   rollBox.show().stop().animate({marginTop: objWindow.scrollTop() - offset.top + 20},400);  } else {   rollOut.fadeIn();   rollBox.hide().stop().animate({marginTop:0},400);  } });

  代碼中已有完整注釋，只需要寫上幾個class或者id（最好不要是id，w3c規(guī)定id不能重復使用）

• 上一篇文章：js實現城市級聯選擇實現代碼
  下一篇文章：wordpress中縮略圖調取幾種方法