懸浮側邊導航 螢幕滑動跟隨響應
阿新 • • 發佈：2019-02-03
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.min.js"></script>
<style>
ul{
list-style: none;
}
i{
font-style: normal;
}
#menu-left {
width: 260px;
min-height: 90px;
float: left;
}
#menu-left ul {
width: 260px;
height: auto;
overflow: hidden;
background: #fff;
}
#menu-left ul li {
width: 260px;
height: 90px;
text-indent: 40px;
font-size: 20px;
line-height: 90px;
cursor: pointer;
border-bottom: 1px solid #c6c6c6;
}
#menu-left ul li:hover a {
color: #0481E0;
}
#menu-left ul li:hover a i {
border-right: 7px solid #0481E0;
}
#menu-left ul li > a {
display: block;
width: 100%;
height: 100%;
color: #AFAFAF;
}
#menu-left ul li i {
width: 43px;
height: 90px;
display: inline-block;
float: right;
text-indent: 0px;
border-right: 7px solid #fff;
}
#menu-left ul .active a {
color: #0481E0;
}
#menu-left ul .active a i {
border-right: 7px solid #0481E0;
}
#menu-left .aside {
position: fixed;
top: 72px;
}
.page{
width:1000px;height:auto;
overflow: hidden;
margin-left: 300px;
}
.page li{
width:100%;height:1000px;
font-size: 50px;
text-align: center;
line-height: 500px;
}
</style>
</head>
<body>
<aside id="menu-left">
<ul id="menu-ul">
<li><a href="#page01">page01<i>></i></a></li>
<li><a href="#page02">page02<i>></i></a></li>
<li><a href="#page03">page03<i>></i></a></li>
<li><a href="#page03">page04<i>></i></a></li>
</ul>
</aside>
<ul class="page">
<li style="background:#0481E0"><a class="mao" name="page01">page01</a></li>
<li style="background:red"><a class="mao" name="page02">page02</a></li>
<li style="background:yellow"><a class="mao" name="page03">page03</a></li>
<li style="background:green"><a class="mao" name="page04">page04</a></li>
</ul>
<script>
window.onscroll = function() {
if($(document).scrollTop() > 100) {
$('#header').addClass('header-active');
$('#menu-left ul').addClass('aside');
} else {
$('#header').removeClass('header-active');
$('#menu-left ul').removeClass('aside')
}
console.log( $(document).scrollTop(),$('.mao').eq(0).offset().top)
for(var i=0;i<$('#menu-ul li').length;i++){
if( $(document).scrollTop() + 233 >= $('.mao').eq(i).offset().top){
$('#menu-ul li').removeClass('active');
$('#menu-ul li').eq(i).addClass('active');
}
}
}
</script>
</body>
</html>