Scrolled Header Class Toggle

by Chris Ball

HTML

<header class="header"></header>
<div class="content"></div>

CSS

body {
	margin: 0;
	padding: 0;
}

.header {
	background: red;
	display: block;
	height: 80px;
	position: fixed;
	transition: background-color 300ms,
				height 450ms;
	width: 100%;
}

.scrolled {
	background: #000;
	height: 50px;
}

.content {
	height: 200vh;
}

JavaScript

var header = document.querySelector('.header')

var headerScrolled = function() {
	scrollTop = window.pageYOffset || document.documentElement.scrollTop
	if (scrollTop <= 1) {
		header.classList.remove('scrolled')
	} else {
		header.classList.add('scrolled')
	}
}

window.addEventListener('scroll', _.throttle(
	headerScrolled, 100, { 'leading': false }
))