<!DOCTYPE html>
<html lang="en" {IF CLASSES}class="classes"{/IF}>

<head>

  <meta charset="UTF-8">

  <meta name="robots" content="noindex">

</head>

<body>

<div class="container" id="app">
    <div id="tips">目标没有出现</div>

    <div class="unit">1</div>
    <div class="unit">2</div>
    <div class="unit">3</div>
    <div class="unit">4</div>
    <div class="unit">5</div>
    <div class="unit">6</div>
    <div class="unit">7</div>
    <div class="unit">8</div>
    <div class="unit">9</div>
    <div class="unit">10</div>
    <div class="unit">11</div>
    <div class="unit">12</div>
    <div class="unit">13</div>
    <div class="unit">14</div>
    <div class="unit">15</div>
    <div class="unit" id="nb">目标元素</div>
    <div class="unit">16</div>
    <div class="unit">17</div>
    <div class="unit">18</div>
    <div class="unit">19</div>
    <div class="unit">20</div>
    <div class="unit">21</div>
    <div class="unit">22</div>
    <div class="unit">23</div>
    <div class="unit">24</div>
    <div class="unit">25</div>
    <div class="unit">26</div>
    <div class="unit">27</div>
    <div class="unit">28</div>
    <div class="unit">29</div>
    <div class="unit">30</div>
    <div class="unit">31</div>
    <div class="unit">32</div>
    <div class="unit">33</div>
    <div class="unit">34</div>
  </div>


</body>

</html>
 html,
    body {
      height: 100%;
    }

    .unit {
      border: 1px solid black;
      height: 50px;
      margin: 40px 0px;
      text-align: center;
    }

    #nb {
      background: red;
      text-align: center;
      line-height: 200px;
      color: #fff;
      font-size: 18px;
    }

    #tips {
      position: fixed;
      left: 0px;
      right: 0px;
      top: 0px;
      text-align: center;
      font-size: 14px;
      background: #fff;
      color: red;
      font-size: 20px;
    }

    .container {
      max-width: 500px;
      margin: 0px auto;
    }
// 配置
const options = {
  // ....
} 
document.addEventListener("DOMContentLoaded", function () {
    //  目标元素
    const target = document.getElementById("nb");
  
     //  API 调用
     var io = new IntersectionObserver(function (entries) {
        if (entries[0].isIntersecting) {
          document.getElementById("tips").innerText = '我出现了';
          
          // 移除一个监听，移除之后，target元素的交叉状态变化，将不再触发回调函数
          // io.unobserve(target)
          
        } else {
          document.getElementById("tips").innerText = '我消失了';
        }
     });
  
  
    //  对元素target添加监听，当target元素变化时，就会触发回调
    io.observe(target);
}, options);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.