微信导航栏
DOCTYPE html>
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><title>Documenttitle><style>*{margin: 0;padding: 0;}li {list-style: none;}.nav li {float: left;margin: 0 5px;}body {background: url(images/wx.jpg) repeat-x;}.nav {margin-top: 20px;}.nav a {display:inline-block;height: 33px;background: url(images/to.png) no-repeat;padding-left: 15px;line-height: 33px;font-size: 14px;color: #fff;}.nav a em {height: 33px;line-height: 33px;}.nav a span {padding-right: 15px;display:inline-block;height: 33px;background: url(images/to.png) no-repeat top right;}.nav a:hover,.nav a:hover span{background-image:url(images/ao.png);}style>
head>
<body >
<div class&＃61;"nav"><ul ><li><a href&＃61;"#"><span>首页内容span>a>li><li><a href&＃61;"#"><span>地方撒法定span>a>li><li><a href&＃61;"#"><span>的双方各span>a>li><li><a href&＃61;"#"><span>防守打法撒旦法span>a>li>ul>
div>
body>
html>
电梯导航
DOCTYPE html>
<html lang&＃61;"en"><head><meta charset&＃61;"UTF-8"><title>Documenttitle><style type&＃61;"text/css">* {padding: 0;margin: 0;list-style: none;}.floor>div {height: 900px;line-height: 900px;text-align: center;color: #fff;font-size: 40px;}.floorNav {width: 40px;height: 200px;position: fixed;right: 0;top: 0;bottom: 0;margin: auto;background: #ddd;}.floorNav>li {height: 40px;line-height: 40px;text-align: center;color: #fff;}.active {background: #e4393c;color: #fff;}style>
head><body><div class&＃61;"floor"><div style&＃61;"background: #ffb6b9">壹div><div style&＃61;"background: #fae3d9">贰div><div style&＃61;"background: #bbded6">叁div><div style&＃61;"background: #8ac6d1">肆div><div style&＃61;"background: #fff1ac">伍div>div><ul class&＃61;"floorNav"><li>壹li><li>贰li><li>叁li><li>肆li><li>伍li>ul><script>let floors &＃61; document.querySelectorAll(".floor>div");let floorNavs &＃61; document.querySelectorAll(".floorNav>li");window.onscroll &＃61; function () {let scrollTop &＃61; document.documentElement.scrollTop || document.body.scrollTop;let activeIndex;floors.forEach((floor, index) &＃61;> {floor.offsetTop - 100 <&＃61; scrollTop ? activeIndex &＃61; index : null;});floorNavs.forEach((nav, index) &＃61;> {index &＃61;&＃61;&＃61; activeIndex ? nav.classList.add(&＃39;active&＃39;) : nav.classList.remove(&＃39;active&＃39;);});};script>
body>html>
京公网安备 11010802041100号