js控制元素进入可视化区域动作效果

获取节点

let cps = document.querySelector(".cps");

监听滚动

window.addEventListener("scroll", handleScroll);

方法

function handleScroll() {

//拿到可视区域高度

let clientHeight =

window.innerHeight ||

document.documentElement.clientHeight ||

document.body.clientHeight;

let cpzxTop = cps.offsetTop;

let cpzxheight = cps.clientHeight;

//快出现进行一些操作

if (cpzxTop + cpzxheight / 2 - scrollTop <= clientHeight) {

cps.style.marginTop = "0px";

cps.style.opacity = "1";

} else {

cps.style.marginTop = "140px";

cps.style.opacity = "0.1";

}

}