页面滚动时移除按钮offscreen类名不生效的解决方法

你写的滚动判断逻辑本身没有问题，不生效基本是以下几个问题导致的：

• JS执行时机错误：如果把滚动监听代码放在页面头部、或者按钮DOM渲染之前执行，代码运行时既找不到目标按钮元素，也可能还没加载完成jQuery，事件绑定直接失败。
• 移动端scrollTop取值兼容问题：部分移动端浏览器下$(this).scrollTop()会返回0或者undefined，导致判断条件永远不成立。
• CSS样式被覆盖：如果后续有其他优先级更高的样式重写了按钮的margin属性，就算类名正常增删，视觉上也不会有变化。
• 滚动容器绑定错误：如果页面做了自定义滚动（比如给html/body设置了overflow:hidden，用内部容器承载滚动），绑定在window上的scroll事件根本不会触发。

JS部分 #

把你原来的JS代码替换成下面的版本，用DOM就绪包裹，同时兼容移动端scrollTop取值：

$(function () {
  const $mobileBtn = $('.mobile-button')
  // 兼容多环境的滚动高度取值
  const getScrollTop = () => window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

  $(window).on('scroll', function () {
    if (getScrollTop() > 100) {
      $mobileBtn.removeClass('offscreen')
    } else {
      $mobileBtn.addClass('offscreen')
    }
  })

  // 初始化时主动触发一次，避免页面初始滚动位置不是0时状态不对
  $(window).trigger('scroll')
})

注意这段JS要放在jQuery引入代码的后面，最好放在</body>闭合标签之前，保证DOM加载完成后再执行。

CSS部分 #

替换原来的按钮样式，提高样式优先级，同时用transform做动画兜底，移动端流畅度比margin动画更好：

.mobile-button {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: #4267b2;
  z-index: 999999;
  transform: translateY(0);
  -webkit-transition: transform .4s ease-in-out;
  transition: transform .4s ease-in-out;
}

/* 提高选择器优先级，避免样式被覆盖 */
body .mobile-button.offscreen {
  /* 用transform把按钮移出屏幕，兼容所有移动端浏览器 */
  transform: translateY(100%);
}

如果你用了自定义滚动容器，把代码里的$(window)替换成实际滚动容器的jQuery选择器即可。

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