当前位置：首页 > 文章列表 > 文章 > 前端 > 如何使用IntersectionObserver API实现左右两侧广告根据页面滚动自动隐藏？

如何使用IntersectionObserver API实现左右两侧广告根据页面滚动自动隐藏？

2024-12-02 22:48:54 0浏览收藏

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《如何使用IntersectionObserver API实现左右两侧广告根据页面滚动自动隐藏？》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

在网站构建中，左右两侧固定广告一直是常见的布局，但它会一直占用屏幕，存在不友好体验。如今，随着前端技术的不断革新，涌现了一种新型布局，实现了左右两侧固定广告根据页面滚动自动隐藏的功能。

实现这一效果其实很简单，不需要知道元素的高度。我们可以通过检测元素是否出现在屏幕上或从屏幕上消失来控制显示隐藏。

以下是实现代码：

<!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>Document</title>
  <style>
    h1 {
      text-align: center;
    }

    .text {
      margin-left: 100px;
    }

    .left {
      position: sticky;
      left: 0;
      top: 10px;
    }

    .end {
      margin-bottom: 100px;
    }
  </style>
</head>

<body>
  <h1>标题</h1>
  <div class="left">
    滚动<br>
    到底<br>
    我就<br>
    不见了
  </div>
  <div class="text">
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
    测试<br>
  </div>
  <div class="end">
    当你看到我，<br>
    左边的文字就消失
  </div>
  <script>
    (function () {

      /** 
       * 底部的文字
       * @type {HTMLDivElement}
       */
      const endEl = document.querySelector('.end');

      /** 
       * 左边的文字
       * @type {HTMLDivElement}
       */
      const leftEl = document.querySelector('.left');

      // 监控end元素是否出现在屏幕上
      const obs = new IntersectionObserver((entries, observer) => {
        // 底部的文字是否已出现
        if (entries[0].isIntersecting) {
          leftEl.style.display = 'none';
        } else {
          leftEl.style.display = '';
        }
      }, {
        rootMargin: '0px',
        threshold: 0.1,
      });

      // 观测底部的文字
      obs.observe(endEl);
    })();
  </script>
</body>

</html>

通过利用IntersectionObserver API，可以检测元素是否出现在屏幕上，进而控制左栏的显示隐藏。这种方式不需要知道元素的高度，便可实现灵活的侧边栏隐藏效果。

到这里，我们也就讲完了《如何使用IntersectionObserver API实现左右两侧广告根据页面滚动自动隐藏？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！