悬浮侧边导航 屏幕滑动跟随响应

<!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>
  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值