最近在一些博客看到側邊欄某些板塊，隨著滾動條的滑動，而跟著滑動或者固定的效果，感覺非常的人性化，一來可以彌補當一個頁面很長，但側邊欄太短的

時候的空白，二來可以合理利用空間展示更多信息，可以大大的提高曝光率和點擊率。這樣子的效果很適合于文章的列表(比如月度排行、熱門文章之類的)，還有

適合于廣告聯盟的展示。所以去網上找了一些資料，整理了一下，現在分享給大家，也方便以后自己查閱，希望對大家有用。

效果一：側邊欄固定模塊

Js代碼//側欄跟隨

(function()?{

var?oDiv?=?document.getElementById("float");

var?H?=?0,

iE6;

var?Y?=?oDiv;

while?(Y)?{

H?+=?Y.offsetTop;

Y?=?Y.offsetParent

};

iE6?=?window.ActiveXObject?&&?!window.XMLHttpRequest;

if?(!iE6)?{

window.onscroll?=?function()?{

var?s?=?document.body.scrollTop?||?document.documentElement.scrollTop;

if?(s?>?H)?{

oDiv.className?=?"div1?div2";

if?(iE6)?{

oDiv.style.top?=?(s?-?H)?+?"px";

}

}?else?{

oDiv.className?=?"div1";

}

};

}

})();

注：為了減少js文件引用，這段代碼可放入任意JS文件中

CSS代碼：/*側欄跟隨*/

#box_float?{float:left;?position:relative;?width:250px;}

.div1?{width:250px;}

.div2?{position:fixed;?_position:absolute;?top:0;?z-index:999;}

注：樣式代碼僅為參考，具體的調整，請結合自己的網站調整。

HTML代碼：

這里寫你網站的代碼與標簽

注：這里可以放文章列表、聯盟廣告，總之是個提高點擊率的好方法。wordpress用戶把此段代碼添加到sidebar.php的側欄位置即可。

特別提示：此代碼試用與任何CMS系統，但該特效在IE6下無法實現，其余瀏覽器均沒問題，同時側欄其余部分應使用靜態文件調用，使用JS調用欄目會出現代碼重疊現象，調用聯盟廣告沒問題。

效果二：側邊欄隨窗口滾動(滑動效果)

來源：知更鳥

實現這個隨窗口滾動效果，首先主題必須加載jQuery。已經完美解決側邊欄會頂著頁腳無限滾下去的bug，一起看看代碼：

var?documentHeight?=?0;

var?topPadding?=?15;

$(function()?{

var?offset?=?$("#sidebar").offset();

documentHeight?=?$(document).height();

$(window).scroll(function()?{

var?sideBarHeight?=?$("#sidebar").height();

if?($(window).scrollTop()?>?offset.top)?{

var?newPosition?=?($(window).scrollTop()?-?offset.top)?+?topPadding;

var?maxPosition?=?documentHeight?-?(sideBarHeight?+?368);

if?(newPosition?>?maxPosition)?{

newPosition?=?maxPosition;

}

$("#sidebar").stop().animate({

marginTop:?newPosition

});

}?else?{

$("#sidebar").stop().animate({

marginTop:?0

});

};

});

});

將上述javascript代碼加到主題頭部header.php模版中。修改其中的#sidebar為你的主題側邊選擇器名稱；根據不同的主題頭部模版高度，適當調整其中的數字“368”。

效果三：添加側邊欄隨滾動條滾動效果(無滑動)

來源：自由的風博客

給側邊欄的各個模塊加上一些class標志，如下圖框框里面的內容：

如果你的側邊欄之前已經有了這些class標志加以區分，只要使用就可以了，不用另外加。

在主題的js文件中加上如下代碼：var?rollStart?=?$('.Statistics'),?//滾動到此區塊的時候開始隨動

rollOut?=?$('.WidgetMeta,.Statistics');?//隱藏rollStart之后的區塊

rollSet?=?$('.RRPosts,.TagsCloud');?//添加rollStart之前的隨動區塊

rollStart.before('

var?offset?=?rollStart.offset(),objWindow?=?$(window),rollBox?=?rollStart.prev();

objWindow.scroll(function()?{

if?(objWindow.scrollTop()?>?offset.top){

if(rollBox.html(null)){

rollSet.clone().prependTo('.rollbox');

}

rollOut.fadeOut();

rollBox.show().stop().animate({top:0,paddingTop:10},400);

}?else?{

rollOut.fadeIn();

rollBox.hide().stop().animate({top:0},400);

}

});

注：滾動區域的內容不能太長，不然會出現無限下拉的情況。

效果四：JQUERY SCROLL FOLLOW這是一個插件，添加步驟很簡單，操作簡單就是使用插件的好處，下載壓縮包解壓到網站目錄，然后按照步驟操作即可。但個人不推薦插件，能用代碼實現的效果，就不用插件。

插件下載地址：http://kitchen.net-perspective.com/open-source/scroll-follow/

示例頁面：

http://kitchen.net-perspective.com/sf-example-1.html

http://kitchen.net-perspective.com/sf-example-2.html

http://kitchen.net-perspective.com/sf-example-3.html

http://kitchen.net-perspective.com/sf-example-4.html

總結

以上是生活随笔為你收集整理的layui表头跟随滚动条滑动_侧边栏实现随滚动条滑动固定的效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。