登录
首页 >  文章 >  前端

侧边悬浮按钮随页面滚动而隐现是如何实现的？

来源：php

时间：2024-10-25 19:25:04 331浏览 收藏

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《侧边悬浮按钮随页面滚动而隐现是如何实现的？》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

侧边悬浮按钮随页面滚动而隐现是如何实现的？

侧边悬浮按钮随页面滚动而隐现的技术

正如您所看到的，侧边悬浮按钮在页面顶端可见，随着屏幕下滑，这些按钮会逐渐消失。这项技术通过检测元素在屏幕上的显示状态来实现。

实现思路

不需要知道元素的高度，而是通过监听元素出现在屏幕上或消失时，再控制元素的显示或隐藏。

示例代码

<!doctype html>
<html>
<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">
    ......略.......
  </div>
  <div class="end">
    当你看到我，<br>
    左边的文字就消失
  </div>
  <script>
    (function () {

      const endel = document.queryselector('.end');
      const leftel = document.queryselector('.left');

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

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

声明：本文转载于：php 如有侵犯，请联系study_golang@163.com删除
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>