预览地址:
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实现网页栏目左侧固定当滚动到底部时自动调整位置 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
吐血整理程序员必读书单: https://github.com/silently9527/ProgrammerBooks 微...
前言 一探浏览器幕后的《三俩事》 上一篇的介绍让大家对浏览器的组成有了个模糊...
Dreamweaver中想要添加电子邮箱的链接,该怎么添加呢?下面我们就来看看详细的教...
大家好,今天想要跟大家分享如何使用纯CSS来实现 Google Material Design 文本输...
第1个问题:你如何指示浏览器显示你希望的字体?仅仅在字模后面键入字体的名称就...
原文链接: js最全身份证号码校验 function validateIdCard (idCard) { let vcity...
因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法: fl...
简介: 云原生为开发者提供了三方面便利:应用基础设施零维护、应用架构现代化零...
前言 大多数的站长们出于成本考虑,对于很多的小型网站不会单独购买服务器,而是...
复制代码 代码如下: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional...