I want to add a class .custom-menu-bg
to sticky menu .custom-menu
on scroll, while having overflow: hidden
on body. Here's my code :
<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: hidden
on body
tag
so I tried :
$('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.
What I want is when I scroll down $('.custom-menu').addClass("custom-menu-bg");
i.e. custom-menu-bg
class gets added to custom-menu
.
And when I scroll up to the top $('.custom-menu').removeClass("custom-menu-bg");
i.e. custom-menu-bg
class gets removed from custom-menu
.
The top of body
,document
,window
etcetera is always 0
.
And top of my div
with class custom-menu
also has top: 0
always.
I'm looking for a permanent solution which works on all browsers.
body { overflow: hidden; }
?? Consider creating a Minimal, Complete, and Verifiable example, it will help you and other SOusers to provide you a better solution.body {overflow:hidden}
.