借鉴了一部分前辈的思路，写的一个死数据，进行的一些状态改变
可能脑子有点笨，正在寻找简化代码的思路。
如果大家有思路可以留言，评论，谢谢！！！
这是html，我只写了两部分，一个是悬浮窗，一个是内容区域，大家可以直接复制代码进入页面，然后引入一个jq的js文件就可以看到效果了。
<body>
<!--侧边悬浮窗-->
<div class="ywF">
<div class="ywD">
<ul>
<li class="active"><a href="#s001">001</a></li>
<li><a href="#s002">002</a></li>
<li><a href="#s003">003</a></li>
<li><a href="#s004">004</a></li>
<li><a href="#s005">005</a></li>
<li><a href="#s006">006</a></li>
</ul>
</div>
</div>
<!--内容区域-->
<div class="cew">
<div class="ce"><a id="s001">001</a></div>
<div class="ce"><a id="s002">002</a></div>
<div class="ce"><a id="s003">003</a></div>
<div class="ce"><a id="s004">004</a></div>
<div class="ce"><a id="s005">005</a></div>
<div class="ce"><a id="s006">006</a></div>
</div>
</body>
这里是css部分，就是对上面部分的样式设置，没什么问题
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.ywF{
width: 90px;
height: 316px;
position: fixed;
top: 258px;
left: 272px;
}
.ywD{
width: 100%;
height: 100%;
}
.ywD ul{
width: 100%;
height: 100%;
border: 1px solid bisque;
display: flex;
flex-flow: column;
justify-content: space-between;
align-items: center;
}
.ywD ul li{
width: 88px;
height: 40px;
box-sizing: border-box;
border: 1px solid gold;
text-align: center;
line-height: 40px;
background: red;
opacity: 0.8;
}
.ywD ul li>a{
display: block;
color: #FFFFFF;
}
.ce{
width: 1000px;
height: 1000px;
margin: 10px auto;
border: 1px solid black;
background-color: greenyellow;
}
/* 这里是因为要根据点击改变侧边按钮的状态，但是不知道为什么如果没有加 !important 点击的时候新加的类名里面的样式会失效，所以我加了一个 !important 用来改变该类名下的样式*/
.active{
background: black !important;
}
</style>
这里是js方面的，
function one(x){
//将每个div距离顶部的位置获取到；
var top1=$(".ce").eq(0).offset().top;
var top2=$(".ce").eq(1).offset().top;
var top3=$(".ce").eq(2).offset().top;
var top4=$(".ce").eq(3).offset().top;
var top5=$(".ce").eq(4).offset().top;
var top6=$(".ce").eq(5).offset().top;
//然后判断当前的滚动条处于的位置，进而改变侧边悬浮框的状态
if (top1<x && x<top2) {
$(".ywD ul li").eq(0).addClass("active");
$(".ywD ul li").eq(0).siblings().removeClass("active");
}else if (top2<x && x<top3) {
$(".ywD ul li").eq(1).addClass("active");
$(".ywD ul li").eq(1).siblings().removeClass("active");
}else if (top3<x && x<top4) {
$(".ywD ul li").eq(2).addClass("active");
$(".ywD ul li").eq(2).siblings().removeClass("active");
}else if (top4<x && x<top5) {
$(".ywD ul li").eq(3).addClass("active");
$(".ywD ul li").eq(3).siblings().removeClass("active");
}else if (top5<x && x<top6) {
$(".ywD ul li").eq(4).addClass("active");
$(".ywD ul li").eq(4).siblings().removeClass("active");
}else if (top6<x ) {
$(".ywD ul li").eq(5).addClass("active");
$(".ywD ul li").eq(5).siblings().removeClass("active");
}
};
//页面滚动获取滚动条的位置，并调用上面的函数
$(window).scroll(function(){
heights=$(this).scrollTop(); //获取当前位置距离顶部的距离
one(heights);//调用one（）方法，并将现在距离顶部的位置传进方法内部
})
</script>
基本就是这么多。如果大家有好的想法一定要告诉我呀，谢谢！！！