网页栏目左侧固定，当滚动到底部时自动调整位置

最新推荐文章于 2021-05-30 20:13:53 发布

原创最新推荐文章于 2021-05-30 20:13:53 发布 · 置顶 · 280 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#程序员 #前端

预览地址：

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前端视频教程噢