滚动监听楼层点亮
2018-06-07 本文已影响3人
孤单的天使
需求:楼层点亮,但是不知道楼层高度,也不知道楼层数量。
意思就是要写一个通用方法
首先给个图看效果吧
效果图上代码
var titles =document.getElementsByClassName('col-or');
//为什么不用jq呢这里,因为我要用getBoundingClientRect()方法,jq没有封装这个方法(好像是),这个怎么不写在下面的$(document).scroll(function () 里面呢,因为优化,
$(document).scroll(function () {
arry_titles_top()
function arry_titles_top() {
for (i=0;i
var checke_top =titles[i].getBoundingClientRect().top;
if(checke_top>40&&checke_top<200){
add_active(i);
}
}
}
function add_active(i) {
x=i+1
console.log($(".content-fixed-top .top>div:nth-child("+x+")"))
$(".content-fixed-top .top>div:nth-child("+x+")").addClass("active")
.siblings().removeClass("active");
}
})