jQuery addClass example

Change class name on click in jQuery

by Dmitri Ganenco

HTML

<div id='container'>
<div class="navbar">
  <p>Hello World</p>
  <button>Change color</button>
</div>

</div>

CSS

#container {
	height: 1000px;
}

JavaScript

/* $(document).scroll(function(){
debugger;
    $('.navbar').toggleClass('scrolled', $(this).
    scrollTop() > $('.navbar').height());
});
 */
document.addEventListener('scroll', function(e) {
	const navbar = document.getElementsByClassName("navbar")[0];
	debugger;
	navbar.classList.toggle('scrolled', document.body.scrollTop > navbar.offsetHeight);
});