如何使用IntersectionObserver API实现左右两侧广告根据页面滚动自动隐藏？-html教程-PHP中文网

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

碧海醫心

发布： 2024-10-26 20:54:03

原创

480人浏览过

如何使用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实现左右两侧广告根据页面滚动自动隐藏？的详细内容，更多请关注php中文网其它相关文章！