I am trying to remove a class from a menu bar when the user scrolls down a page. I read the following topic and doc to get an idea on jquery scroll():
1) https://stackoverflow.com/a/16391580/1050957
2) http://api.jquery.com/scroll/
This is my code:
var jquery = jQuery.noConflict();
jquery(document).ready(function(){
$(window).scroll(function () {
if (document.body.scrollTop > 100)
$('#menuBar').removeClass( "nav-menu" );
else
// something something
});
});
The above code is an extract from the SO answer from another topic (link given above). But when I add that code, I am seeing: Not enough arguments to Window.scroll.
error for $(window).scroll(function ()
. I dont know why its expecting 2 arguments since the doc I read on scroll() uses without an argument. Have I done something wrong? Or has something changed with the later version of Jquery?
I am using jquery v1.11.0
Use a full jquery code. Working example:
#menuBar { background: yellow; width: 50px; height: 800px; }
#menuBar.nav-menu { background: red; }
<div id="menuBar" class="nav-menu"></div>
<div style="margin-bottom: 999em;"></div>
$(document).ready(function(){
$(window).on('scroll', function () {
var $body = $('body');
var $target = $('#menuBar');
if ($body.scrollTop() > 100 && $target.hasClass('nav-menu')){
$target.removeClass("nav-menu");
}
else if( $body.scrollTop() <= 100 && !$target.hasClass('nav-menu') ){
$target.addClass('nav-menu');
}
});
});
Make sure to check if the class is already added to prevent innecesary stuff.
Check jsfiddle