页面滚动时隐藏.menu-text、回到顶部时显示的代码问题排查

我希望实现如下交互效果：当页面发生滚动时，隐藏class为menu-text的span元素；当页面滚动至屏幕顶部位置时，该元素重新显示。
我先后尝试编写了三段代码，但均无法正常运行实现预期效果，代码如下：

// 第一段代码
$(function() {
  $(document).on("mousewheel", function() {
    if($(document).scrollTop() < 50){
        $('.menu-text').css("display","block");
    } else {
        $('.menu-text').css("display","none");
    }; 
  });
});

// 第二段代码
$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() < 50) {
      $(".menu-text").addClass("hidden");
    } else {
       $(".menu-text").removeClass("hidden");
    }
  });
});

// 第三段代码
$(document).ready(function() {
  $(document).on("mousewheel", function() {
    if ($(this).scrollTop() < 50) {
      $(".menu-text").hide();
    } else {
       $(".menu-text").show();
    }
  });
});

目标元素对应的HTML结构如下：

<button id="open-button" class="hamburger menu-button hamburger--spin" type="button">
  <span class="menu-text">MENU</span>
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

请问上述代码存在哪些错误，应当如何修正以实现预期效果？

• 事件绑定错误：第一、第三段代码用mousewheel事件监听滚动，这个事件只会在鼠标滚轮滚动时触发，无法覆盖键盘翻页滚动、触屏滑动、拖动滚动条等其他滚动场景，兼容性极差。
• 显示/隐藏逻辑写反：第二段代码中，滚动距离顶部小于50px（也就是处于页面顶部位置）时反而加hidden类隐藏元素，滚动离开顶部时反而移除类显示元素，和需求完全相反；第三段代码同样逻辑颠倒，滚动距离小于50的时候执行hide()隐藏，大于50的时候反而执行show()显示。
• 监听对象错误：页面滚动的标准监听对象是window，绑定在document上的滚动事件在部分浏览器下无法正确获取滚动距离数值。
• 冗余语法问题：第一段代码if判断的闭合花括号后多写了不必要的分号，虽然不直接影响运行，但属于不规范写法。

首先确保页面已经引入jQuery，直接写入如下逻辑即可：

$(function() {
  // 监听window的标准scroll事件，覆盖所有滚动触发场景
  $(window).on('scroll', function() {
    // 滚动距离顶部小于50px判定为处于顶部区域，显示元素；否则隐藏
    if ($(this).scrollTop() < 50) {
      $('.menu-text').show();
    } else {
      $('.menu-text').hide();
    }
  })
  // 页面初始化时主动触发一次scroll事件，避免页面初始加载时状态不符合预期
  .trigger('scroll');
});

如果习惯用CSS类控制显示隐藏，可以提前定义好.hidden类样式：

.hidden {
  display: none !important;
}

对应的JS可以简化为类切换写法，逻辑和上述版本完全一致：

$(function() {
  $(window).on('scroll', function() {
    // 滚动距离>=50时加hidden类隐藏，否则移除类显示
    $('.menu-text').toggleClass('hidden', $(this).scrollTop() >= 50);
  }).trigger('scroll');
});

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