这个功能现在应用的非常普遍，如果页面比较高，当滚动条拖到页面的下面的时候，侧边栏会出现一个固定跟随浏览器的DIV框，现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
代码如下
HTML代码：
|
1
2
3
4
5
6
|
<div id="header">header</div><div id="sidebarWrap"><div id="sidebar">Sidebar</div></div><div id="main">Main</div><div id="footer">footer</div> |
CSS代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
body {margin: 10px auto;font-family: sans-serif;width: 500px;}div {border-radius: 5px;box-shadow: 1px 2px 5px rgba(0,0,0,0.3);border: 1px solid #ccc;padding: 5px;}#sidebarWrap {height: 400px;width: 210px;float: right;position: relative;box-shadow: none;border: none;margin: 0;padding: 0;}#main {width: 270px;height: 4000px;}#footer {clear: both;margin: 10px 0;}#sidebar {width: 200px;height: 300px;position: absolute;}#header {height: 200px;margin-bottom: 10px;}#sidebar.fixed {position: fixed;top: 0;}#footer { height: 600px; }#footer { height: 600px; } |
JavaScript代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
$(function() {var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));var maxY = footTop - $('#sidebar').outerHeight();$(window).scroll(function(evt) {var y = $(this).scrollTop();if (y > top) {if (y < maxY) {$('#sidebar').addClass('fixed').removeAttr('style');} else {$('#sidebar').removeClass('fixed').css({position: 'absolute',top: (maxY - top) + 'px'});}} else {$('#sidebar').removeClass('fixed');}});}); |
