JavaScript: nascondere o mostrare gli elementi durante lo scroll

In questo articolo vedremo come mostrare e nascondere un header posizionato in modo assoluto sulla pagina a seconda della porzione di contenuto effettivamente scrollata. Non useremo jQuery.

Partiamo dagli stili CSS fondamentali:

html, body, #site {
	min-height: 100%;
	height: 100%;
}

#site {
	overflow: scroll;
	width: 100%;
}

header {
	background: #000;
	height: 3em;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	-webkit-transition: height 500ms ease-in;
	-ms-transition: height 500ms ease-in;
		transition: height 500ms ease-in;
}

.hidden {
	height: 0;
	overflow: hidden;
}

L'evento scroll andrà applicato al contenitore generale e per questo motivo tale contenitore dovrà necessariamente permettere lo scroll del contenuto o l'evento non avrà mai luogo.

Dopo aver definito una transizione che nasconderà l'elemento con l'ausilio di una speciale classe CSS, possiamo scrivere il seguente codice JavaScript:

(function() {
	function ScrollHide ( element ) {

		this.viewport = document.getElementById( "site" );
		this.element = document.getElementById( element );
        this.elementHeight = this.element.offsetHeight;

		this.scrollElement = function() {
			var self = this;
			self.viewport.addEventListener( "scroll", function() {
				var top = this.scrollTop;

				if( top > self.elementHeight ) {
					self.element.className = "hidden";
				} else {
					self.element.className = "";
				}

			}, false);
		};

		this.scrollElement();
	}

	document.addEventListener( "DOMContentLoaded", function() {
		var scrollHideInstance = new ScrollHide( "banner" );
	});

})();