非常令我折服的前端前沿技术，真是牛逼的一塌糊涂.....可惜我不会，求指导

先看图：

首先打开页面，左侧的点赞、评论、收藏、分享按钮出现在眼前。
再往下看：

文章末位，到此处依然还有。
如果此时屏幕再往下滑，左边的那些点赞、评论、收藏、分享按钮就会消失。
目前在头条、腾讯网站上面见到过这样的技术，有大神知道这个是咋实现的吗？求分享源码。
个人感觉它牛逼就牛逼在了，你不知道你的文章内容有多少，内容区域有多高，就感觉很厉害。

阅读 2.4k

你不需要知道元素的高度，你可以检测某个元素出现在屏幕上或者从屏幕上消失，再控制显示隐藏就行了。

<!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>
  </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的文档。
https://developer.mozilla.org...

非常令我折服的前端前沿技术，真是牛逼的一塌糊涂.....可惜我不会，求指导

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

如何防止接口的 key 泄露?

字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？

在购买页面，这里有： for 1 month, for 3 months，这里说的意思是什么呢？

Next.js做纯前端是否可行？

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

请问开发React Native，一般是推荐哪个主流的UI库呢？