滚动触发元素显示后继续滚动不消失的问题修复咨询

问题出在滚动事件的隐藏逻辑里，缺少向下滚动超过显示触发点后再滚动指定距离的判断条件。只需要调整判断逻辑，补充向下滚动的隐藏触发规则即可：

修改后的JavaScript代码 #

var offsetTop = $("#second").offset().top;
var isVisible = false;
var scrollThreshold = 100; // 可自定义的触发距离
var scrollDistance = 0;

// 获取目标元素
var $showElement = $("#show");

// 计算元素居中位置
var windowHeight = $(window).height();
var elementHeight = $showElement.height();
var topPosition = (windowHeight - elementHeight) / 2;

// 初始化元素样式
$showElement.css({
  position: "fixed",
  top: topPosition + "px",
  left: "50%",
  transform: "translateX(-50%)",
  display: "none"
});

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();

  // 显示条件：滚动到offsetTop+scrollThreshold下方，且元素未显示
  if (scrollTop > offsetTop + scrollThreshold && !isVisible) {
    $showElement.fadeIn(200);
    isVisible = true;
    scrollDistance = scrollTop; // 记录元素显示时的滚动位置
  } 
  // 隐藏条件：满足任一规则则隐藏
  else if (isVisible && (
    // 规则1：向下滚动超过显示位置后，再滚动与触发显示相同的距离
    scrollTop >= scrollDistance + scrollThreshold || 
    // 规则2：回滚到显示触发点的上方区域
    scrollTop <= offsetTop + scrollThreshold
  )) {
    $showElement.fadeOut(200);
    isVisible = false;
  }
});

修复说明 #

• 新增scrollTop >= scrollDistance + scrollThreshold判断：元素显示后，继续向下滚动与显示触发距离一致的像素，立即触发隐藏
• 调整回滚隐藏条件为scrollTop <= offsetTop + scrollThreshold，确保滚动回显示触发点上方时元素及时隐藏，匹配需求
• 保留了元素始终居中的样式逻辑，无需改动

完整可运行代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section id="first">
  <h1>First</h1>
</section>

<section id="second">
  <h1>Second</h1>
  <div id="show"><pre>Hey!</pre></div>
</section>

<style>
#first{
  height: 200px;
  background: #eee;
}

#second{
  height: 2800px;
  background: rgba(0,0,0,0.3);
}

#show{
  display: none;
  padding: 1rem;
  background: white;
  border-radius: 4px;
}
</style>

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