長文章內(nèi)容右側(cè)隨滾動條滾動div的jquery實現(xiàn)

2014-07-29 11:05:16來源:大前端作者:

當內(nèi)容頁比較長的時候,網(wǎng)站右側(cè)一直是空白,不如放點有用的東西給用戶看,最好不要放廣告,因為那樣很邪惡,你懂的。

當內(nèi)容頁比較長的時候,網(wǎng)站右側(cè)一直是空白,不如放點有用的東西給用戶看,最好不要放廣告,因為那樣很邪惡,你懂的。

好吧,昨天寫了這個東西,jQuery滾動隨動區(qū)塊,代碼如下:

//側(cè)欄隨動
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不能重復使用)。

關(guān)鍵詞:jquery

贊助商鏈接: