网页栏目左侧固定，当滚动到底部时自动调整位置
预览地址：
https://ovsexia.gitee.io/leftfixed/
html:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <script src="js/jquery-1.10.1.min.js" type="text/java script"></script> 6 <link href="css/layout.css" type="text/css" rel="stylesheet" /> 7 <link href="css/style.css" type="text/css" rel="stylesheet" /> 8 </head> 9 10 <div class="top"></div> 11 12 <div class="page"> 13 <div class="left"> 14 <div class="left_poi"></div> 15 <div class="left_in"> 16 <p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p> 17 </div><!--left_in--> 18 19 <script> 20 $(window).scroll(function() 21 { 22 saction(); 23 }); 24 function saction() 25 { 26 sj = 20; //底部间隔 27 st = $(window).scrollTop(); //滚动条高度 28 sd = $(".left_poi").offset().top; 29 sd_h = $(".left_in").height(); 30 sb = $(".bottom").offset().top; 31 sb_h = $(".bottom").height(); 32 rd_h = $(".right").height(); 33 bh = window.innerHeight; 34 si = sb-sd_h; 35 36 if(st>sd && rd_h>=sd_h){ 37 $(".left_in").addClass("on"); 38 if(st>si){ 39 sy = bh-(sb-st)+sj; 40 $(".left_in").css({"top":"auto","bottom":sy+"px"}); 41 }else{ 42 $(".left_in").css({"top":"","bottom":""}); 43 } 44 }else{ 45 $(".left_in").removeClass("on"); 46 } 47 } 48 </script> 49 </div><!--left--> 50 51 <div class="right"></div> 52 53 <div class="clear"></div> 54 </div><!--page--> 55 56 <div class="bottom"></div> 57 58 </body> 59 </html>
css:
1 @charset "utf-8"; 2 .clear {clear:both; height:0 !important; width:0 !important; overflow:hidden; font-size:0;} 3 4 .top {width:100%; height:150px; background:#0CC;} 5 .bottom {width:100%; height:400px; background:#39C;} 6 .page {width:1200px; margin:20px auto; position:relative;} 7 .left {width:200px; float:left;} 8 .left_in {width:200px; background:#46bc67; border-top:3px solid #000; border-bottom:3px solid #000;}