How to jquery to add/remove class on window scroll down/up?

How to jquery to add/remove class on window vertical scroll page up/down - The objective is to use JQuery to add and remove class from an HTML element and window vertical scroll up/down to add/remove class to jquery very simple custom code given below-

Window vertical scroll up/down to add and remove class in jquery

The following js code vertical window scroll up/down to remove/add class for you need to include first jquery cnd link (library file) on header part in your website and also copy below code and paste on website header part in after head tag for website.
Here- if the user page scroll down, .headerclass class with added .yourClass then the user page scroll up to .yourClass will be automatically removed to your webpage.

How to window scroll up/down to add/remove class in jquery for webpage

The following is the add/remove class vertical page scroll to jquery code:-
<script>
jQuery( document ).ready(function() {
jQuery(window).scroll(function(){
var sticky = $('.headerclass'),
scroll = $(window).scrollTop();
if (scroll >= 100) sticky.addClass('yourClass');
else sticky.removeClass('yourClass');
});
});
</script>

The following is the add/remove this class vertical page scroll to css code, this also add on your website with style tag and you can do change styling according design requirement.
<style>
.yourClass{
position:fixed;
top:0px;
left:0;
right:0;
background:#000;
color:#fff;
text-align:center;
}
</style>

Post a Comment

0 Comments