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>- 上一篇 »css固定定位，不随滚动条滚动
- 下一篇 »实现html中select下拉列表中部分选项不可选