提示：前几天运营想要实现一个效果，当滚动轮滑过某个视口时，当该视口不可时，悬浮框显示，当该视口上滑可见时，悬浮框可见。可以看到上方底色的背景显示时，右下角黑色悬浮框隐藏，上方背景隐藏时，下方悬浮框隐藏。因为不想用jquery以及通过offfsetHeight计算等实现，采用了intersectionObserver实现，
提示：开始时总想着监听下方背景板，但后来发现无法实现，改为监听上方背景板实现。`
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试intersectiontitle>
<style>
.one {
height: 200vh;
background-color: aqua;
}
.two {
height: 100vh;
background-color: aquamarine;
}
.aside {
position: fixed;
bottom: 100px;
right: 0px;
display: none;
width: 100px;
background-color: black;
}
style>
head>
<body>
<div class="one">div>
<div class="two">div>
<div class="aside">aoaoaooadiv>
<script type="text/javascript">
let imgs = document.getElementsByClassName('one')[0];
let aside = document.getElementsByClassName('aside')[0]
const config = {
rootMargin: '0px',
threshold: 0
}
let observer = new IntersectionObserver((entries, self) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
console.log(entry.rootBounds);
aside.style.display = 'none'
} else {
aside.style.display = 'block'
}
})
}, config)
observer.observe(imgs)
script>
body>
html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）