<!doctype html> <html> <head> <meta charset='utf-8'> <title>锚定滑动边栏</title> <script src="http://developer.baidu.com:80/resources/online/common/lib/jquery/jquery-1.9.1.min.js"></script> <style type="text/css"> .container{ background:#bbbfff; } .head{ width:; height:100px; background:#fff000; } .warpper{ overflow:hidden; background:#888f00; } .left{ position:absolute; width:; height:; background:#0ff000; } .item{ background:#00fff0; width:100px; height:; } .right{ position:relative; left:150px; background:#00ff00; } .context{ width:; height:100px; background:#D0CBC1; white-space:normal; word-break:break-all; } .foot{ clear:both; width:; height:100px; background:#000fff; } </style> </head> <body> <div class="container"> <div class="head"> <h1>头部</h1> </div> <div class="warpper"> <div class="left"> <ul class="menu"> <li></li> <li class="item"><a href="#he1">项目1</a></li> <li class="item"><a href="#he2">项目2</a></li> <li class="item"><a href="#he3">项目3</a></li> <li class="item"><a href="#he4">项目4</a></li> <li class="item"><a href="#he5">项目5</a></li> <li class="item"><a href="#he6">项目6</a></li> <li class="item"><a href="#he7">项目7</a></li> </ul> </div> <div class="right"> <strong id="he1">项目1</strong> <div class="context">项目介绍</div> <strong id="he2">项目2</strong> <div class="context">项目介绍</div> <strong id="he3">项目3</strong> <div class="context">项目介绍</div> <strong id="he4">项目4</strong> <div class="context">项目介绍</div> <strong id="he5">项目5</strong> <div class="context">项目介绍</div> <strong id="he6">项目6</strong> <div class="context">项目介绍</div> <strong id="he7">项目7</strong> <div class="context">项目介绍</div> </div> </div> <div class="foot">底部</div> </div> </body> </html> <script type="text/javascript"> //左边栏随滑动条滚动IE CROME FIREFOX window.onscroll = function(){ var scroll_top_x = document.documentElement.scrollTop || document.body.scrollTop; var left_top_x = $(".left").offset().top; var move_x = 0 ; if( scroll_top_x > left_top_x){ move_x = scroll_top_x - left_top_x; } var menu_height = $(".menu").height(); var menu_top_x = $(".menu").offset().top; var left_height = menu_height + menu_top_x; var right_height = $(".right").height() + $(".right").offset().top; if(right_height>left_height){ $(".menu").css({'margin-top':(move_x)+'px'}); }else{ move_x = right_height - left_top_x - $(".menu").height(); $(".menu").css({'margin-top':(move_x)+'px'}); } } </script>