預覽地址：
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實現(xiàn)網頁欄目左側固定當滾動到底部時自動調整位置 ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
