首页 > 其他分享> 文章详细

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

2020-09-15 09:02:43 阅读：224 来源： 互联网

标签：侧边 li 滚动条 ul ywD ce 按钮 active eq

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

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

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

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

<body>

<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部分，就是对上面部分的样式设置，没什么问题

}
.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>

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

标签：侧边,li,滚动条,ul,ywD,ce,按钮,active,eq
来源： https://www.cnblogs.com/l-ialiu/p/13671040.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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