Javascript实现滚动条下拉时,侧边栏固定的实现
一般博客侧边栏高度小于主体内容区时，滚动条滚动到到侧边栏底部时，侧边栏固定。
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>
