本文章來給大家介紹一個不錯的WordPress側邊欄添加隨屏滾動效果,有需要了安裝的也可照此方法來設置.

具體效果可以直接打開我博客首頁查看(我的文章頁是沒有側邊欄的)，簡單說就是一定高度范圍內側邊欄無定位屬性(position:static),超過這個高度范圍則跟隨著屏幕一起滾動(position:fixed),經常逛淘寶的同學大概會有印象,當頁面拖動使 寶貝詳情 / 評價詳情 / 成交記錄 這欄超過屏幕顯示范圍時會固定到上方隨著屏幕一起滾動,這樣可以方便地切換內容,而不影響當前內容的瀏覽.

實現的方法很簡單,在主題的 footer.php 中添加以下代碼:

1. <script type="text/javascript"> 
2. $(document).ready(function(){ 
3.    $(function(){ 
4.    var swidth=$('#accordion1').width(); // 獲取#accordion1的寬度（若側欄為固定寬度的可以刪去） 
5.        $(window).scroll(function(){ 
6.            if($(this).scrollTop()>$("#header").height()){ // 滾屏距離大于#header高度時處理 
7.                $('#accordion1').css({top:'30px',position:'fixed',width:swidth+'px'}); // 添加fixed和寬度 
8.            } else { 
9.                $('#accordion1').css({position:'static'}); // 復位 
10.            } 
11.        }); 
12.    }); 
13. }); 
14. </script> 

#accordion1 是需要隨屏滾動內容的ID,請按需修改,代碼如下:

$(this).scrollTop()>$("#header").height()

判斷滾動屏幕的距離是否大于 #header 的高度,你也可以修改成固定值,例如如下代碼:

$(this).scrollTop()>200

var swidth=$('#accordion1').width();

用于獲取#accordion1的寬度,固定寬度的可以刪除這一行(包括后面的 ,width:swidth+'px').