css实现网页栏目左侧固定当滚动到底部时自动调整位置
(编辑:jimmy 日期: 2024/11/6 浏览:3 次 )
预览地址:
https://ovsexia.gitee.io/leftfixed/
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script> <link href="css/layout.css" type="text/css" rel="stylesheet" /> <link href="css/style.css" type="text/css" rel="stylesheet" /> </head> <div class="top"></div> <div class="page"> <div class="left"> <div class="left_poi"></div> <div class="left_in"> <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> </div><!--left_in--> <script> $(window).scroll(function() { saction(); }); function saction() { sj = 20; //底部间隔 st = $(window).scrollTop(); //滚动条高度 sd = $(".left_poi").offset().top; sd_h = $(".left_in").height(); sb = $(".bottom").offset().top; sb_h = $(".bottom").height(); rd_h = $(".right").height(); bh = window.innerHeight; si = sb-sd_h; if(st>sd && rd_h>=sd_h){ $(".left_in").addClass("on"); if(st>si){ sy = bh-(sb-st)+sj; $(".left_in").css({"top":"auto","bottom":sy+"px"}); }else{ $(".left_in").css({"top":"","bottom":""}); } }else{ $(".left_in").removeClass("on"); } } </script> </div><!--left--> <div class="right"></div> <div class="clear"></div> </div><!--page--> <div class="bottom"></div> </body> </html>
css
@charset "utf-8"; .clear {clear:both; height:0 !important; width:0 !important; overflow:hidden; font-size:0;} .top {width:100%; height:150px; background:#0CC;} .bottom {width:100%; height:400px; background:#39C;} .page {width:1200px; margin:20px auto; position:relative;} .left {width:200px; float:left;} .left_in {width:200px; background:#46bc67; border-top:3px solid #000; border-bottom:3px solid #000;} .left_in.on {position:fixed; top:0;} .left_poi {width:100%; height:1px; overflow:hidden;} .right {width:960px; height:2100px; float:right; overflow:hidden; background:#FC3;}
总结
以上所述是小编给大家介绍的css实现网页栏目左侧固定当滚动到底部时自动调整位置 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
下一篇:一个关于border-radius值设置的问题记录