今天小编跟大家讲解下有关css实现网页栏目左侧固定当滚动到底部时自动调整位置 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css实现网页栏目左侧固定当滚动到底部时自动调整位置 的相关资料，希望小伙伴们看了有所帮助。
预览地址：
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=http://xyrl.com/skin/7ke/image/nopic.gif 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实现网页栏目左侧固定当滚动到底部时自动调整位置 希望对大家有所帮助 如果大家有任何疑问请给我留言 小编会及时回复大家的。在此也非常感谢大家对爱蒂网站的支持！
来源：爱蒂网
