预览地址:
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/javascript"></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;}
9 .left_in.on {position:fixed; top:0;}
10 .left_poi {width:100%; height:1px; overflow:hidden;}
11 .right {width:960px; height:2100px; float:right; overflow:hidden; background:#FC3;}
如果有想学习web前端的程序员,加VX:TZ07900, 免费送web前端视频教程噢