思路很简单:就是跟着滚动条走,判断滚动条在不同的位置,让导航对应位置显示高亮
2.点击对应的导航部分,跳转到对应的导航内容部分
结构部分
<div id="box">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
<div class="content">
<section class="a1">n1</section>
<section class="a1">n2</section>
<section class="a1">n3</section>
<section class="a1">n4</section>
<section class="a1">n5</section>
<section class="a1">n6</section>
<section class="a1">n7</section>
</div>
很简单不多叙述
css样式
<style type="text/css">
*{margin: 0;padding: 0;}
#box{overflow: hidden;}
#box ul{width: 300px;height: 40px;float: right;list-style: none;transform: rotateZ(90deg);position: fixed;top: 50%;left: 5%;}
#box ul li{width: 20px;height: 20px;border: aqua 3px solid;border-radius: 50%;float: left;color: #333;text-align: center; line-height: 20px;margin-right: 3px;}
.content section{width: 80%;margin: auto;border: 1px solid #000;height: 700px;margin-bottom: 20px;}
.active{background-color: red}
</style>
也很简单,不叙述
jq部分
<script type="text/javascript">
$("#box ul li ").each(function(){
$("#box ul li ").click(function(){
$current=$(".content section").eq($(this).index()).offset().top;
// console.log($current);
$("html,body").animate({
"scrollTop":$current
},300);
$("#box ul li ").eq($(this).index()).addClass("active").siblings().removeClass("active");
})
})
$(window).scroll(function(){
$_top=$(window).scrollTop();
// console.log($_top);
if ($_top>=0&&$_top<386) $("#box ul li ").eq(0).addClass("active").siblings().removeClass("active");
if ($_top>=386&&$_top<1100) $("#box ul li ").eq(1).addClass("active").siblings().removeClass("active");
if ($_top>=1100&&$_top<1850)$("#box ul li ").eq(2).addClass("active").siblings().removeClass("active");
if ($_top>=1850&&$_top<2560)$("#box ul li ").eq(3).addClass("active").siblings().removeClass("active");
if ($_top>=2560&&$_top<3288)$("#box ul li ").eq(4).addClass("active").siblings().removeClass("active");
if ($_top>=3288&&$_top<4000)$("#box ul li ").eq(5).addClass("active").siblings().removeClass("active");
if($_top>=4000){$("#box ul li ").eq(6).addClass("active").siblings().removeClass("active");}
})
</script>
数值的选取看console的结果自己设定。