JS实现页面滚动到#ordersection后隐藏悬浮下单按钮的开发问题

问题根因 #

按钮显隐逻辑仅绑定了scroll事件，浏览器触发锚点跳转时部分场景不会主动触发scroll事件，导致逻辑未执行；同时硬编码的高度阈值适配性差，页面内容、布局调整后很容易出现区间判断错误。

修复方案 #

步骤1：抽离公共显隐逻辑，替换硬编码高度为动态计算 #

把判断逻辑从scroll回调中单独抽出来，方便多场景调用，同时直接获取锚点元素的实际位置做判断，适配性更强：

function toggleOrderBtn() {
  const isMobile = window.matchMedia("(max-width: 768px)").matches;
  const scrollTop = $(document).scrollTop();
  // 动态获取锚点区域位置参数
  const orderSectionTop = $('#ordersection').offset().top;
  const orderSectionHeight = $('#ordersection').outerHeight();

  if (isMobile) {
    // 移动端逻辑：滚动位置在显示区间且未进入锚点区域时显示按钮
    if (scrollTop > 23500 && scrollTop < 40000 && scrollTop < orderSectionTop) {
      $('.order-now-btn-a').fadeIn();
    } else {
      $('.order-now-btn-a').fadeOut();
    }
  } else {
    // 桌面端逻辑
    if (scrollTop > 1000 && scrollTop < 80000 && scrollTop < orderSectionTop) {
      $('.order-now').fadeIn();
    } else {
      $('.order-now').fadeOut();
    }
  }
}

你可以根据自己的实际需求调整区间判断条件，上面的代码默认实现「进入#ordersection区域就隐藏按钮」的逻辑。

步骤2：多场景触发判断逻辑 #

除了滚动事件外，页面初始化、锚点跳转后都要手动调用一次判断函数：

// 绑定滚动事件
$(document).scroll(toggleOrderBtn);
// 页面初始化时执行一次，避免首次加载状态错误
toggleOrderBtn();

// 给跳转锚点的按钮绑定点击事件，跳转后触发判断
$('.order-now-btn-a, .order-now').on('click', function(e) {
  e.preventDefault();
  const target = $('#ordersection');
  // 平滑滚动到锚点位置
  $('html, body').animate({
    scrollTop: target.offset().top
  }, 300, function() {
    // 滚动完成后手动触发显隐判断
    toggleOrderBtn();
  });
});

// 如果用默认锚点跳转不需要平滑动画，可加监听hash变化的逻辑备用
$(window).on('hashchange', function() {
  if (location.hash === '#ordersection') {
    toggleOrderBtn();
  }
});

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