楼层效果

来源：互联网发布：ubuntu 安装mysql5.7 编辑：程序博客网时间：2024/04/24 05: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