如何让position: fixed的blue_square仅在divTwo内滚动显示？

我有以下HTML、CSS和jQuery代码：

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="divOne"></div>

<div class="divTwo">
  <div class="col-md-12 col-sm-10">
    <div id="blue_square" style="top: 310px;">Blue</div>
  </div>
</div>

<div class="divThree"></div>

CSS代码 #

.divTwo {
  position: relative;
}

#blue_square {
  position: fixed;
  right: 0;
  z-index: 9;
  width: 370px;
  box-shadow: 0 0 6px transparent;
}

jQuery代码 #

$("#blue_square").css("top", $(window).height() / 2 - 80)

当前遇到的问题：blue_square元素会出现在divOne区域，期望它仅从divTwo开始显示，且滚动时始终被限制在divTwo范围内——滚动divOne或divThree时都不显示它，如何用JavaScript实现？

核心思路是监听页面滚动事件，通过计算divTwo的位置与视口的重叠关系，动态控制blue_square的显示状态和位置：

1. 调整基础CSS #

先给blue_square添加默认隐藏样式，避免初始状态出现在错误区域：

#blue_square {
  position: fixed;
  right: 0;
  z-index: 9;
  width: 370px;
  box-shadow: 0 0 6px transparent;
  display: none; /* 默认隐藏 */
}

2. 编写滚动监听逻辑 #

通过jQuery监听scroll和load事件，实时计算位置并控制元素：

$(window).on('scroll load', function() {
  const $divTwo = $('.divTwo');
  const $blueSquare = $('#blue_square');
  
  // 获取divTwo的位置与尺寸
  const divTwoTop = $divTwo.offset().top;
  const divTwoBottom = divTwoTop + $divTwo.outerHeight();
  // 获取视口的滚动位置与高度
  const viewportTop = $(window).scrollTop();
  const viewportBottom = viewportTop + $(window).height();
  
  // 计算blueSquare的目标居中位置
  let targetTop = viewportTop + ($(window).height() / 2) - 80;
  
  // 处理边界：避免超出divTwo顶部
  if (targetTop < divTwoTop) {
    targetTop = divTwoTop;
  }
  // 处理边界：避免超出divTwo底部（需考虑元素自身高度）
  else if (targetTop + $blueSquare.outerHeight() > divTwoBottom) {
    targetTop = divTwoBottom - $blueSquare.outerHeight();
  }
  
  // 判断视口与divTwo是否重叠，控制显示/隐藏
  if (viewportBottom > divTwoTop && viewportTop < divTwoBottom) {
    $blueSquare.css('top', targetTop).show();
  } else {
    $blueSquare.hide();
  }
});

逻辑说明 #

• 页面加载和滚动时都会触发计算，确保初始状态和滚动过程中都能正确显示
• 通过边界判断，让blue_square始终被限制在divTwo的上下范围内，不会超出
• 只有当视口与divTwo区域有重叠时才显示元素，滚动到divOne或divThree区域时自动隐藏

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