Sticky Header: Animated

by Roberto Apasajja

HTML

<header>
  Animated Fixed Header
</header>

<main>
  <h3>Hello World!</h3>
  <p>
    Contents<br>
    Contents<br>
    Contents<br>
    Contents<br>
    Contents<br>
    Contents<br>
    Contents<br>
    Contents<br>
    Contents
  </p>
</main>

CSS

body{margin:0; height: 2000px}
html * {transition: 1s}

header {
    width: 100%;
    padding:20px;
    color: white;
	  position: fixed;
    background-color:rgba(0, 0, 0, 0.3);
    font-size:30px;
}
header.shrink {
    padding:10px;
    font-size:19px;
}

main {
	  padding-top: 70px;
    background:skyblue
}

JavaScript

// Animated Fixed Header
$(function () {
	$(window).scroll(function () {
		var scroll = getCurrentScroll();
		if (scroll >= 1) {
			$('header').addClass('shrink');
		} else {
			$('header').removeClass('shrink');
		}
	});
	function getCurrentScroll() {
		return window.pageYOffset || document.documentElement.scrollTop;
	}
});