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

发布日期： 2024-10-26 阅读量： 作者： 网络

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

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

以下是实现代码：

<!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>

上一篇: 何时避免使用 PHP 函数通过引用传递参数？

下一篇: 怎么解除微信小程序邮箱绑定

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

随便看看