这个功能现在应用的非常普遍，如果页面比较高，当滚动条拖到页面的下面的时候，侧边栏会出现一个固定跟随浏览器的DIV框，现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。

代码如下

HTML代码：

<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代码：

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代码：

$(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');}});});