楼层效果

来源:互联网 发布:ubuntu 安装mysql5.7 编辑:程序博客网 时间:2021/03/07 20:27
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商场楼层效果</title> <style> *{margin:0; padding:0;} .container{width:1000px;margin:auto;} #header{width:1000px;height:500px;line-height:400px;text-align:center;font-size:50px;background-color:#ccc;} [id^="floor"]{ width:1000px; height:500px; background-color: #069; font-size:50px; line-height: 500px; text-align:center; } #floor1{ background-color: orange;} #floor2{ background-color: cadetblue;} #floor3{ background-color: peru;} #floor4{ background-color: mediumpurple;} #floor5{ background-color: #adadad;} #floor6{ background-color: aquamarine;} #floor7{ background-color: peru;} #flist{list-style:none;width:30px;position:fixed;top:100px;margin-left:-50px;} #flist li{line-height:30px;font-size:14px;text-align: center;width:30px;height:30px;border:solid 1px #333;} #flist li.active{background-color:red;color: #efeeff;font-size:18px;} </style>   </head> <body> <div class="container" id="container"> <ul id="flist"> <li id="f1">1楼</li> <li id="f2">2楼</li> <li id="f3">3楼</li> <li id="f4">4楼</li> <li id="f5">5楼</li> <li id="f6">6楼</li> <li id="f7">7楼</li> <li id="f8">8楼</li> <li id="top">TOP</li> </ul> <div id="header">页面头部</div> <div id="floor1">一楼商品</div> <div id="floor2">二楼商品</div> <div id="floor3">三楼商品</div> <div id="floor4">四楼商品</div> <div id="floor5">五楼商品</div> <div id="floor6">六楼商品</div> <div id="floor7">七楼商品</div> <div id="floor8">八楼商品</div> </div> <script> // 获取所有的楼层div var _divs = document.getElementById("container").getElementsByTagName("div"); var _lis = document.getElementById("container").getElementsByTagName("li"); window.onscroll = function() { // 1. 滚动条卷去网页的高度 var _st = document.documentElement.scrollTop||document.body.scrollTop; console.log(_st); // 2. 每一个div距离顶部距离 for(var i = 0; i < _divs.length; i++) { console.log(_divs[i].offsetTop + ";" + _divs[i].offsetHeight + ";" + _st);   if(_st >= _divs[i].offsetTop + 300 && _st ) { _lis[i].className = "active"; } else { _lis[i].className = ""; } } console.log("______________________________"); } </script> </body> </html>
0 0
原创粉丝点击
热门问题 小猫受 格来云兑换码 力宇刻字机usb驱动 spring-boot-starter:2.1.4 org.mybatis.spring.boot:mybatis-spring-boot-starte org.mybatis.spring.boot:mybatis-spring-boot-starte 午睡的妈妈 午睡的格子裙 科学通报 程序员 单反相机对不了焦怎么办 单反相机聚不了焦怎么办 单反相机对不上焦怎么办 手机拍不了照怎么办 摄影师老了以后怎么办 淘宝卖窗帘配件怎么办 唯品会包裹丢了怎么办 左右脸咬肌不一样大怎么办 脸两边不一样大怎么办 淘宝买的出问题怎么办 淘宝店铺忘记了怎么办 买宠物被骗了怎么办 养羊刚进的羊苗怎么办 孕后期便秘出血怎么办 针织裙子变形了怎么办 背带牛仔裙太短怎么办 牛仔裙太短了怎么办 牛仔裤裤腿瘦了怎么办 牛仔裤买肥了怎么办 牛仔短裤裤腰肥怎么办 白色洞洞鞋脏了怎么办 菜刀快递不让寄怎么办 淘宝退款后悔了怎么办 淘宝退货还收货怎么办 淘宝售后没人理怎么办 淘宝店铺不理人怎么办 客服半天不理人怎么办 淘宝优惠券删了怎么办 ip地址受限制怎么办 订单地址错了怎么办 闲鱼恶意退货怎么办 闲鱼上遇到恶意退货怎么办 快递没修改地址怎么办 买家退货寄错怎么办 收件人想改地址怎么办 淘宝不给你验收怎么办 王者订单不验收怎么办 点错延长收货怎么办 点击了延长收货怎么办 淘宝未确认收货怎么办 转转买家要退货怎么办