Javascript 切换滚动条上的粘滞菜单类，页面上隐藏溢出

我想添加一个类

.custom menu bg

到粘性菜单

.custom menu

滚动，同时在主体上有

溢出：隐藏。这是我的密码：

<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>

但这段代码只适用于Mozilla，它甚至不是一个解决方案，它只是一个临时补丁或解决方案

我想要的是当我向下滚动
$（'.custom menu'）.addClass（“custom menu bg”）即
自定义菜单bg
类被添加到
自定义菜单

当我向上滚动到顶部
$（'.custom menu'）.removeClass（“custom menu bg”）即
自定义菜单bg
类从
自定义菜单中删除

正文
，
文档
，
窗口
等的顶部总是
0
。
我的
div的顶部
和class
自定义菜单
也始终具有
top:0

我正在寻找一个永久的解决方案，它可以在所有浏览器上工作

您可以在任何id或类上绑定。现在你请客
我在用窗户

如果您有或没有滚动，则此单一事件适用于这两种情况。i、 e溢出：隐藏或溢出：滚动


$（窗口）.bind（'mousewheel-DOMMouseScroll'，函数（事件）{
if（event.originalEvent.wheelDelta>0 | | event.originalEvent.detail<0）{
//向上滚动
$（'.custom menu'）.removeClass（“custom menu bg”）；
}
否则{
//向下滚动
$（'.custom menu'）.addClass（“custom menu bg”）；
}
});
。自定义菜单{
背景色：黑色；
高度：100px；
宽度：100%
}
.自定义菜单背景{
背景颜色：绿色；
}
我复制了你想要的效果

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

然后，使用jQuery，您将检查由正文
div
（负责保存内容）中的包装器触发的
scroll
事件，而不是检查它本身（甚至是
文档
）

这是因为临时body div的
溢出
属性设置为
隐藏
，因此不会生成特定的
滚动
事件（如果使用特定于浏览器的滚动事件注册处理程序，可能会发生）。而内部的
包装
div将始终具有由其内容确定的
高度
属性，因此是可滚动的

注意：jQuery的
scroll（）
是跨浏览器的，因此是一个永久的解决方案。
当
正文{overflow:hidden；}
时，您如何滚动？？考虑创建A，它将帮助你和其他SoSeS提供更好的解决方案。@ ViVKKUPADHYAY提到这可能有助于你“Vitorinofernandes”我重视你的建议，但是这个链接对我没有任何用处，因为我有一个条件：代码>体{溢出：隐藏}。
。请您创建一个提琴或代码片段，以便我/其他用户能够理解您的问题。仅看js很难分辨
$('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");
  }
});

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