根据滚动条位置改变侧边悬浮按钮的状态

借鉴了一部分前辈的思路，写的一个死数据，进行的一些状态改变

可能脑子有点笨，正在寻找简化代码的思路。

如果大家有思路可以留言，评论，谢谢！！！

这是html，我只写了两部分，一个是悬浮窗，一个是内容区域，大家可以直接复制代码进入页面，然后引入一个jq的js文件就可以看到效果了。

<body>

<div class="cew">
<div class="ce"><a ; font-size: 18px'> </div>

</body>

这里是css部分，就是对上面部分的样式设置，没什么问题

}
.ywD ul{
100%;
height: 100%;
border: 1px solid bisque;
display: flex;
flex-flow: column;
justify-content: space-between;
align-items: center;
}
.ywD ul li{
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{
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>

基本就是这么多。如果大家有好的想法一定要告诉我呀，谢谢！！！

根据滚动条位置改变侧边悬浮按钮的状态

相关推荐