Переключить класс липкого меню на прокрутку с переполнением, скрытым на странице

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"); i.e. custom-menu-bg класс добавляется к custom-menu.

И при прокрутке вверх $('.custom-menu').removeClass("custom-menu-bg"); i.e. 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"); 
     } 
    }); 

Это происходит потому, что самодельное ДИВО тело имеет множество overflow собственности на hidden, и, следовательно, не будет генерировать это конкретное scroll события (, может быть, если бы у вас обработчик зарегистрирован с помощью браузера конкретной прокрутки события).В то время как у внутреннего wrapper div всегда будет свой height свойство, определяемое его содержимым, и поэтому прокручивается.

Примечание: JQuery-х scroll() является кросс-браузер, и, следовательно, постоянное решение.

Answer 2

Вы также можете связываться с любым идентификатором или классом. его на вас на данный момент demo i я использую окно.

Это единственное мероприятие работает как для прокрутки, так и для прокрутки. Переполнение то есть: скрытый или переполнения: прокрутки

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