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>

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

$('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，您将检查由scroll内部的包装器触发的div事件 - 负责持有内容） - 而不是单独（甚至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。

滚动时粘贴菜单类，页面上隐藏溢出

2 个答案: