在滚动时切换粘性菜单类，并在页面上隐藏溢出

Question

我想在滚动条上添加一个类.custom-menu-bg 到粘性菜单.custom-menu，同时在主体上添加overflow: hidden。这是我的代码：

<script type="text/javascript" src="css/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
  var _rys = jQuery.noConflict();
  _rys("document").ready(function() {
    _rys(window).scroll(function() {
      if (_rys(this).scrollTop() > 1) {
        _rys('.custom-menu').addClass("custom-menu-bg");
      } else {
        _rys('.custom-menu').removeClass("custom-menu-bg");
      }
    });
  });
</script>

但此代码不适用于 body 标签上的 overflow: hidden 所以我尝试了：

$('html').on('DOMMouseScroll', function(e) {
  var delta = e.originalEvent.detail;
  if (delta < 0) {
    if ($('body').hasClass('section-element-1'))
      $('.custom-menu').addClass("custom-menu-bg");
  } else if (delta > 0) {
    $('.custom-menu').removeClass("custom-menu-bg");
  }
});

但此代码仅适用于 Mozilla，甚至不是解决方案，它只是临时修复或解决方法。

我想要的是当我向下滚动$('.custom-menu').addClass("custom-menu-bg"); 时，即custom-menu-bg 类被添加到custom-menu。

当我向上滚动到顶部 $('.custom-menu').removeClass("custom-menu-bg"); 即 custom-menu-bg 类从 custom-menu 中删除。

body,document,window 等的顶部总是0。 在我的div 和custom-menu 的顶部也有top: 0 总是。

我正在寻找适用于所有浏览器的永久解决方案。

Answer 1

我已经复制了你想要的相同效果HERE。

与您的代码相比，我带来的唯一变化是我制作了一个 临时正文 div 并在其上应用了 overflow: hidden。

然后，使用 jQuery，您将检查由主体 div 内的 wrapper 触发的 scroll 事件 - 它负责保存内容） - 而不是由本身（甚至document）。

$('.wrapper').scroll(function () {
      if ($(this).scrollTop() > 0) {
          $('.custom-menu').addClass("custom-menu-bg");
      } else {
          $('.custom-menu').removeClass("custom-menu-bg");
      }
  });

这是因为临时主体 div 的 overflow 属性设置为 hidden，因此不会生成特定的 scroll 事件（如果您使用浏览器注册了处理程序，可能会发生这种情况-特定的滚动事件）。而内部的wrapper div 将始终具有由其内容确定的height 属性，因此可滚动。

注意： jQuery 的 scroll() 是跨浏览器的，因此是一个永久解决方案。

Answer 2

您也可以绑定任何 id 或类。它现在在你身上演示我 正在使用窗口。

无论你是否有滚动，这个单一事件都适用。即溢出：隐藏或溢出：滚动

$(window).bind('mousewheel DOMMouseScroll', function(event){
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
        // scroll up
        $('.custom-menu').removeClass("custom-menu-bg");
    }
    else {
        // scroll down
      $('.custom-menu').addClass("custom-menu-bg");

    }
});

.custom-menu {
  background-color: black;
  height: 100px;
  width: 100%
}
.custom-menu-bg{
background-color: green;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-menu">

</div>

或者你也可以使用这个jQuery鼠标滚轮插件https://github.com/brandonaaron/jquery-mousewheel。