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

最新推荐文章于 2021-05-30 20:17:59 发布

置顶梦想编程

最新推荐文章于 2021-05-30 20:17:59 发布

阅读量225

点赞数

文章标签：程序员前端

本文链接：https://blog.csdn.net/weixin_44970764/article/details/90670248

版权

预览地址：

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

梦想编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页栏目左侧固定，当滚动到底部时自动调整位置

预览地址：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 xm...
复制链接

扫一扫