javascript实现某元素显示隐藏带动其他元素隐藏显示

人生意义几何

已于 2022-05-25 20:51:35 修改

阅读量458

点赞数

分类专栏： CSS javascript 文章标签： javascript css3 前端

于 2022-05-25 20:50:44 首次发布

本文链接：https://blog.csdn.net/zhudingfengshen/article/details/124973260

版权

javascript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

CSS

9 篇文章 0 订阅

订阅专栏

项目场景：

提示：前几天运营想要实现一个效果，当滚动轮滑过某个视口时，当该视口不可时，悬浮框显示，当该视口上滑可见时，悬浮框可见。可以看到上方底色的背景显示时，右下角黑色悬浮框隐藏，上方背景隐藏时，下方悬浮框隐藏。因为不想用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>测试intersection</title>
    <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">aoaoaooa</div>

    <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
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript实现某元素显示隐藏带动其他元素隐藏显示

项目场景：提示：前几天运营想要实现一个效果，当滚动轮滑过某个视口时，当该视口不可时，悬浮框显示，当该视口上滑可见时，悬浮框可见。可以看到上方底色的背景显示时，右下角黑色悬浮框隐藏，上方背景隐藏时，下方悬浮框隐藏。因为不想用jquery以及通过offfsetHeight计算等实现，采用了intersectionObserver实现，解决方案：提示：开始时总想着监听下方背景板，但后来发现无法实现，改为监听上方背景板实现。`<!DOCTYPE html><html lang="en
复制链接

扫一扫