如何在HTML页面的指定区块中显示/隐藏固定元素

需求：固定元素#logoimode3需在#section1、#section4中隐藏，#section2、#section3中显示；同时在小屏幕下始终隐藏该元素。

问题分析 #

原代码仅监听了#section2的位置，未覆盖#section3的显示逻辑，且缺少响应式隐藏的处理，导致需求无法完全实现。以下是优化后的完整解决方案：

完整代码实现 #

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 小屏幕下强制隐藏logo */
    @media (max-width: 768px) {
      #logoimode3 {
        display: none !important;
      }
    }
  </style>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script>
    jQuery(document).ready(function($) {
      // 获取所有目标区块元素
      const sections = ['section1', 'section2', 'section3', 'section4'].map(id => document.getElementById(id));
      const logo = $('#logoimode3');

      // 配置各区块的logo显示规则：true=显示，false=隐藏
      const displayRules = {
        section1: false,
        section2: true,
        section3: true,
        section4: false
      };

      // 核心逻辑：判断当前视口对应的区块，切换logo显示状态
      function toggleLogo() {
        let showLogo = false;
        sections.forEach(section => {
          const rect = section.getBoundingClientRect();
          // 判断区块是否与视口有重叠（即当前滚动到该区块范围）
          const isSectionInView = rect.top < window.innerHeight && rect.bottom > 0;
          if (isSectionInView) {
            showLogo = displayRules[section.id];
          }
        });
        showLogo ? logo.show() : logo.hide();
      }

      // 页面初始化时执行一次
      toggleLogo();
      // 滚动时实时更新
      $(window).scroll(toggleLogo);
    });
  </script>
</head>
<body>
  <img id="logoimode3" class="logo3" style="position:fixed;top:0px;left:0px;" src="https://imode.info/imode/slike/ikone/IMODE_znak-01.svg" alt="logo" width="30px">

  <section id="section1" style="background: red; height:100vh;"></section>
  <section id="section2" style="background: blue; height:100vh;"></section>
  <section id="section3" style="background: green; height:100vh;"></section>
  <section id="section4" style="background: pink; height:100vh;"></section>
</body>
<footer></footer>
</html>

关键说明 #

1. 响应式隐藏：通过CSS媒体查询，在屏幕宽度≤768px时强制隐藏logo，!important确保优先级高于JS动态设置的display属性。
2. 滚动逻辑优化：
   • 提前配置displayRules对象，方便后续修改各区块的显示规则，无需改动核心逻辑。
   • 使用getBoundingClientRect()判断区块是否进入视口，精准识别当前滚动到的区块范围。
   • 页面初始化和滚动时都触发判断函数，保证初始状态和滚动过程中logo显示状态正确。

内容的提问来源于stack exchange，提问作者user20020679