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

Toggle class of sticky menu on scroll with overflow hidden on page

提问by Ashwani Shukla

I want to add a class .custom-menu-bgto sticky menu .custom-menuon scroll, while having overflow: hiddenon body. Here's my code :

我想在滚动时.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>

But this code doesn't work with overflow: hiddenon bodytag so I tried :

但是此代码不适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");
  }
});

But this code only works for Mozilla and it's not a solution even, it's just a temp fix or work-around.

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

What I want is when I scroll down $('.custom-menu').addClass("custom-menu-bg");i.e. custom-menu-bgclass gets added to custom-menu.

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

And when I scroll up to the top $('.custom-menu').removeClass("custom-menu-bg");i.e. custom-menu-bgclass gets removed from custom-menu.

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

The top of body,document,windowetcetera is always 0. And top of my divwith class custom-menualso has top: 0always.

body、document、window等的顶部始终是0。而我div的同班之巅custom-menu也top: 0一直如此。

I'm looking for a permanent solution which works on all browsers.

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

采纳答案by Ahmad Baktash Hayeri

I've reproduced the same effect you wanted HERE.

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

The only change that I've brought in comparison to your code is that I've made a makeshift body divand applied overflow: hiddenon it.

与您的代码相比，我带来的唯一更改是我制作了一个临时主体div并对其进行了应用overflow: hidden。

Then, using jQuery, you'll be checking for the scrollevent triggered by a wrapperinside the body div- which is in charge of holding the content) - and not by itself (or even document).

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

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

This is because the makeshift body div has an overflowproperty set to hidden, and therefore won't generate that particular scrollevent (maybe it would if you had the handler registered using browser-specific scroll events). Whereas the inner wrapperdiv will always have it's heightproperty determined by it's content and is therefore scrollable.

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

NOTE:jQuery's scroll()is cross-browser, and hence a permanentsolution.

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

回答by Keval Bhatt

You can bind on any id or on class also . its on you for now demo i am using window .

您也可以绑定任何 id 或类。现在由你来演示我正在使用 window 。

This single event works for both if you have scroll or not. i.e overflow:hidden or overflow:scroll

无论您是否滚动，此单个事件都适用于两者。即溢出：隐藏或溢出：滚动

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

Or you can also use this jQuery mousewheel plugin https://github.com/brandonaaron/jquery-mousewheel.

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