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

程序员文章站 2022-07-02 18:06:49

网页栏目左侧固定，当滚动到底部时自动调整位置预览地址： https://ovsexia.gitee.io/leftfixed/ html: css: ......

预览地址：

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;}

上一篇：浪漫短信浪漫爆笑

下一篇：代号“悟空”！小米高通骁龙898旗舰曝光