исчезающая шапка при прокрутке

by Denis Tverdokhlebov

HTML

<div class="name"></div>

CSS

body {
    height: 2000px;
}

.name {
    background: red;
    height: 50px;
    position: fixed;
    top: 0;
    width: 100%;
}

JavaScript

(function() {
	var elem = document.querySelector('.name'),
		body = document.body,
		html = document.documentElement;

	window.addEventListener('scroll', function() {
		var scrollHeight = (html.scrollHeight || body.scrollHeight) - this.innerHeight,
			scrollTop = html.scrollTop || body.scrollTop || 0;
		elem.style.opacity = 1 - 1 / scrollHeight * scrollTop;
	});
})();