安全保卫工作职责网页栏目左侧固定，当滚动到底部时自动调整位置
预览地址：
https://ovxia.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; chart=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 /&怎么考在职研究生gt;<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").offt().top;29 sd_h = $(".left_in").height();30 sb = $(".bottom").offt().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 }el{42 $(".left_in").css({"top":"","bottom":""});43 }44 }el{45 $(".left_in").removeclass("on");46 }47 }48 </script>49 </div><!--left-->50 51 <div class="right"></d兴义师范学院iv>52 53 <div class="clear"></div>54 </div><!--page-->55 56 <div class="bottom"></div>57 58 </body>59 </html>css:
1 @chart "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;}
本文发布于:2023-04-03 15:12:41，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/6efcd385f9e16ba73b839a7cbd5abfec.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：网页栏目左侧固定，当滚动到底部时自动调整位置.doc
本文 PDF 下载地址：网页栏目左侧固定，当滚动到底部时自动调整位置.pdf
| 留言与评论（共有 0 条评论） |
