jQuery addClass example

Change class name on click in jQuery

by righto

HTML

<div class="block">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac lacus eget purus dignissim finibus. Sed non blandit dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec maximus sem et quam efficitur ornare. Curabitur ullamcorper dui mi, at consequat elit consectetur et. Phasellus bibendum arcu vel dictum molestie. Maecenas in congue augue. Quisque sapien tellus, vulputate eu vulputate tristique, commodo a metus. Donec tempor suscipit tellus id mollis. Phasellus egestas nisl et quam finibus, non venenatis nulla maximus.

Donec blandit lectus id congue posuere. Praesent vitae dapibus ex. Curabitur dignissim dignissim sapien sit amet egestas. Integer eleifend nulla tellus, in scelerisque felis pulvinar id. Nulla facilisi. Praesent convallis, neque vel congue bibendum, leo nibh sollicitudin eros, scelerisque ultricies metus justo quis elit. Fusce eu luctus eros. Maecenas a ex id lectus elementum maximus sit amet viverra arcu. In scelerisque, odio vitae accumsan finibus, tortor tortor mollis quam, nec dignissim eros nulla quis quam. Mauris quis porttitor orci, et sagittis risus. Sed cursus tristique nisl sit amet bibendum. Sed bibendum tellus ligula, et dignissim arcu scelerisque at. Sed gravida mauris neque, vel ullamcorper tortor interdum vitae. Aenean consequat fermentum euismod. Etiam posuere, est eget consequat rutrum, nulla odio lobortis enim, sit amet commodo justo mi ut ligula.

Praesent justo justo, accumsan ornare consequat sed, lacinia in ipsum. Integer commodo ligula sapien, non dapibus mauris scelerisque a. Maecenas feugiat lectus a dui rhoncus scelerisque. Proin ut ante rutrum lectus hendrerit iaculis. Maecenas cursus nisi vitae urna sollicitudin, a ultricies urna auctor. Fusce vel ipsum erat. Praesent aliquam euismod nisi quis suscipit. Etiam efficitur nec eros quis tempus. Praesent nec libero ultricies, sodales velit tristique, molestie dolor. Donec venenatis quam eu sodales...

CSS

.button {
  background:#f60;
  color:#fff;
  text-align:center;
  height:50px;
}

.fixed {
  position:fixed;
  bottom:0px;
  left:0px;
  right:0px;
}

footer {
  height:200px;
  background:#000;
}

JavaScript

var $element = $('.button');

$(window).scroll(function() {
	var scroll = $(window).scrollTop() + $(window).height();
	var offset = $element.offset().top;
				 
	if (scroll > offset) {
		$('.button').removeClass("fixed");
		} else {
		$('.button').addClass("fixed");
	}		 
});