一般博客側邊欄高度小於主體內容區時，滾動條滾動到到側邊欄底部時，側邊欄固定。
JavaScript代碼如下：
1 $.fn.scrollFix = function (opt) { 2 var defaults = { 3 baseTop: 50, // 初始top值 4 main: ".main" // 主體區選擇器 5 }; 6 var settings = $.extend(defaults, opt); 7 8 var $window = $(window), 9 $this = $(this), 10 windowHeight, 11 scrollTop, 12 thisHeight, 13 $main = $(settings.main), 14 mainHeight; 15 $window.scroll(function () { 16 windowHeight = $window.height(); 17 scrollTop = $window.scrollTop(); 18 mainHeight = $main.height(); 19 $this.each(function (idx, val) { 20 thisHeight = $(this).height(); 21 // 當主體區高度小於側邊欄時不做處理 22 if (mainHeight < thisHeight) { 23 return false; 24 } 25 // 當主體區高度大於側邊欄，且下滾高度+窗口高度大於側邊欄高度時，固定側邊欄 26 if (scrollTop + windowHeight > thisHeight) { 27 $(this).css({ 28 position: 'fixed', 29 bottom: "50px" 30 // top: (thisHeight - windowHeight) > 0 ? -(thisHeight - windowHeight) - 30 : settings.baseTop 31 // left: (idx*100) +"px" 32 // 如果當前元素的高度大於窗口高度，則上移 當前元素高度與窗口高度的差值， 33 // 否則緊貼窗口頂部 34 }); 35 } else { 36 $(this).css({ 37 position: 'static' 38 }); 39 } 40 }); 41 }); 42 43 }
html代碼如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>fixedsidebar</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 .container { 12 width: 1200px; 13 margin: 0 auto; 14 min-height: 500px; 15 margin-top: 50px; 16 } 17 .header { 18 position: fixed; 19 width: 100%; 20 height: 50px; 21 left: 0; 22 top: 0; 23 background-color: #123; 24 z-index: 999 25 } 26 .main { 27 width: 70%; 28 height: 2000px; 29 border: 1px solid gray; 30 float: left; 31 display: inline-block; 32 background-image: url('006.jpg'); 33 } 34 .side { 35 width: 100px; 36 height: 900px; 37 float: left; 38 display: inline-block; 39 background-image: url('018.jpg'); 40 } 41 </style> 42 </head> 43 <body> 44 <div class="header"></div> 45 <div class="container"> 46 <div class="main"></div> 47 <div class="side"> 48 <pre> 49 aaaa 1 50 bbbb 2 51 aaaa 3 52 aaaa 4 53 aaaa 5 54 aaaa 6 55 aaaa 7 56 aaaa 8 57 aaaa 9 58 aaaa 10 59 aaaa 11 60 aaaa 12 61 aaaa 13 62 aaaa 14 63 aaaa 15 64 aaaa 16 65 cccc 17 66 aaaa 18 67 aaaa 19 68 aaaa 20 69 aaaa 21 70 aaaa 22 71 aaaa 23 72 aaaa 24 73 aaaa 25 74 aaaa 26 75 aaaa 27 76 aaaa 28 77 aaaa 29 78 aaaa 30 79 aaaa 31 80 aaaa 32 81 aaaa 33 82 aaaa 34 83 aaaa 35 84 aaaa 36 85 aaaa 37 86 aaaa 38 87 aaaa 39 88 aaaa 40 89 aaaa 41 90 aaaa 42 91 aaaa 43 92 aaaa 44 93 aaaa 45 94 aaaa 46 95 aaaa 47 96 aaaa 48 97 aaaa 49 98 aaaa 50 99 aaaa 51 100 aaaa 52 101 aaaa 53 102 aaaa 54 103 aaaa 55 104 aaaa 56 105 aaaa 57 106 eeee 58 107 aaaa 59 108 aaaa 60 109 aaaa 61 110 cddd 62 111 </pre> 112 </div> 113 </div> 114 <script type="text/javascript" src="jquery.js"></script> 115 <script type="text/javascript" src="scrollFix.js"></script> 116 <script type="text/javascript"> 117 $(".side").scrollFix( { 118 baseTop: 50, // 初始top值 119 main: ".main" // 主體區選擇器 120 }); 121 </script> 122 </body> 123 </html>