Come creare lo “Sticky Header”

Come creare lo “Sticky Header”

Buongiorno a tutti, oggi è venerdi ossia il giorno dei TUTORIAL ed andremo a vedere come creare lo “Sticky Header”, ossia l’header che rimane fisso in alto anche allo scroll della pagina. Per molti di voi sarà una cosa semplice realizzarlo, in quanto effettivamente lo è, ma per chi si avvicina allo sviluppo del design, potrebbe essere problematico realizzarlo.

E io che ci sto a fare? A semplificarvi la vita naturalmente 🙂!

Come di tutti i miei tutorial, potete vedere la demo QUI oppure scaricare il codice da QUI.

Iniziamo con il creare la nostra struttura HTML base, con all’interno del body un div con id “mio_header” e con classe “header”:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Come creare lo "Sticky Header"</title>
</head>
<body>
<div class="header" id="mio_header">
  <h2>My Header</h2>
</div>
</body>
</html>

Una volta fatto ciò, aggiungiamo anche il div per il “top-content” ed il div per il “contenuto” (con un po’ di testo di esempio), modificando il codice in questa maniera:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Come creare lo "Sticky Header"</title>
</head>
<body>

<div class="top-container">
  <h1>Sticky Header</h1>
  <p>Scrolla giù per vedere l'effetto Sticky</p>
</div>

<div class="header" id="mio_header">
  <h2>My Header</h2>
</div>

<div class="content">
  <h3>Sticky Header</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa accusamus nam facere, ab accusantium vero tempore iusto distinctio dicta neque, odio fuga! Corporis mollitia magni, dicta esse ducimus optio sint magnam hic dolorem delectus in architecto recusandae aliquam dolorum ut, aut nihil tempora minus ullam voluptatem odio, nulla autem est sed! Id animi dolor iure quia repudiandae qui laudantium asperiores, doloribus eius, porro assumenda, mollitia aperiam. Maxime quia quidem possimus non quaerat officiis ducimus nihil ratione, eaque explicabo provident minima numquam perferendis sequi, impedit quibusdam aspernatur suscipit commodi laborum! Vero saepe distinctio cumque ipsam expedita veniam perspiciatis sed nam est consequatur dolor consequuntur rem voluptas, magnam esse ratione maxime numquam tempora iste, tenetur eveniet similique officiis veritatis voluptatem! Sint velit doloremque, debitis fugit dolorem quasi provident architecto minus beatae labore omnis quas corporis quis deleniti voluptatibus, maiores, aut aliquid ipsum earum. Dignissimos dolor illum enim soluta officia praesentium quae illo dolore nihil, obcaecati ipsum architecto eum ipsam repudiandae, reiciendis molestiae voluptatibus, qui rerum placeat ut maiores est voluptate. Veniam consequatur quaerat, quam mollitia ab, ad architecto, rerum voluptas quis excepturi aperiam unde, quasi possimus. Cumque odio dolorum, perspiciatis tempora recusandae, asperiores sapiente dolor autem harum quidem fugiat facere in. Repellendus atque ipsum, ab, iste voluptatum a illo ipsa. Voluptas, aspernatur, facere. Nesciunt expedita officiis, fugiat vero nihil alias quasi, nostrum aliquid voluptate magnam? Mollitia natus minima similique praesentium dolorum velit cupiditate illo impedit iste beatae dolor qui, facere officia voluptate omnis sunt nisi, libero. Tempora ipsam, mollitia id eligendi rem! Consequuntur quo, sed consequatur omnis modi perspiciatis architecto, quod ea iure magni, adipisci aut ut quasi ullam accusamus quam pariatur rerum commodi sequi ipsum dolorum dignissimos corporis et eaque! Ut aliquam culpa ipsum labore officiis laborum, esse aperiam error velit recusandae earum dolorum asperiores eveniet mollitia quo officia repellat quis nisi! Asperiores dolor nobis omnis perferendis! Quo hic aperiam similique aliquid maiores veritatis est voluptate, cumque necessitatibus. Mollitia, maiores! Ipsa praesentium molestias facilis, saepe! Ipsam unde aperiam dolor dolorem similique, voluptatem quos architecto voluptas fugit, labore exercitationem, quasi error laboriosam nemo cum illo. Ratione fuga consequuntur animi ut assumenda accusamus dicta sunt doloribus autem laudantium odio, quas delectus expedita eaque non soluta, iusto impedit explicabo, ipsam ducimus repellat mollitia voluptatibus. Atque, cupiditate, nesciunt. Inventore cupiditate, blanditiis asperiores neque numquam nihil ipsum nesciunt, aliquam mollitia harum distinctio voluptas eligendi voluptate, adipisci itaque. Fugiat repellat nulla, praesentium quo sint accusantium culpa consequuntur voluptates molestias qui ut et provident rem sequi maxime earum nostrum eum quam accusamus nesciunt autem hic necessitatibus ea, voluptatibus. Beatae dicta itaque tempore laborum facilis quis at explicabo, iste dolore eum doloribus sequi esse fuga voluptate a. Impedit aspernatur, tenetur rerum esse aperiam dolor nemo deserunt vitae? Ipsa molestiae iste aliquam vero aspernatur omnis assumenda culpa corporis amet libero quia, eius voluptate consequatur facere non odit alias placeat fuga tenetur! Fugiat eveniet laboriosam dolore eos velit accusamus rem impedit odit id ad iusto, dolorem est ab, expedita adipisci nemo. Quae voluptatem cum pariatur assumenda nemo suscipit, maiores, dolor et.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est suscipit, culpa. Id quaerat provident repudiandae minima earum vero quibusdam, aut, voluptatibus iure atque, magnam incidunt tempore vitae? Nesciunt voluptates sed veritatis architecto a, aut sit natus aperiam facere dolores labore quibusdam rem et reprehenderit alias maiores ipsum? Iste expedita, aut. Deserunt, fugit adipisci nulla veritatis obcaecati repudiandae excepturi pariatur error, similique sint! Molestiae magnam corporis soluta? Est rerum sunt debitis nesciunt mollitia ipsa ducimus, magni esse quod qui enim molestiae praesentium libero corporis! Est, harum incidunt obcaecati perspiciatis nam, expedita earum, quasi qui facere consequatur, molestias doloremque quis animi pariatur!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt ex, quia voluptatum deserunt minus excepturi! Cupiditate iste vero voluptas assumenda sapiente obcaecati consequuntur. Dolor atque autem laboriosam quas odio at modi, veritatis recusandae eligendi asperiores assumenda aliquam laudantium necessitatibus libero, ab ut dolorum provident ipsa, nostrum nulla rem voluptatem dignissimos illo tempore quis. Doloribus velit sint dolor minus nihil! Ipsum vitae iusto libero, dignissimos recusandae assumenda! Mollitia accusamus totam ducimus itaque eligendi ullam earum omnis consectetur facere maxime ad suscipit dolorum saepe assumenda aperiam illum, atque inventore sint molestias odio fugiat nemo nulla! Aliquam maxime accusantium minus ullam, deleniti culpa quidem ipsum odit, repellendus vero iste quod est dolorum? Corrupti voluptatum molestias incidunt ipsam similique eos fugiat, delectus pariatur excepturi ex beatae esse id odit voluptates odio adipisci nobis aspernatur provident, nemo dolorem ab? Nesciunt labore eos eaque accusantium fugit! Aspernatur unde laboriosam corporis a veniam distinctio amet pariatur, vero aliquid porro quam, nostrum in ex tempora dignissimos. Recusandae, eos laudantium totam possimus perspiciatis cupiditate voluptatibus aspernatur necessitatibus quae fugit dolore ad vitae voluptatum similique assumenda libero aperiam nostrum nemo. Dignissimos, tenetur, sed. Amet facilis eius ratione quae vitae pariatur nisi cupiditate similique neque numquam minus deserunt necessitatibus et dicta cum, nihil esse quasi autem porro mollitia delectus magni maiores eveniet aut. Nostrum impedit quas doloremque dicta enim facilis nihil, ab accusamus consequuntur! Doloremque eaque quidem tenetur? Molestias animi dolore non, quam, possimus tempore quidem id odio iure illo in, optio impedit quia repellendus laboriosam vero voluptatem quis officia commodi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum qui magnam nihil eligendi veniam explicabo reiciendis eius aut, aliquam, quam consequuntur tenetur sapiente quisquam delectus ab natus odio officia, id laboriosam itaque consequatur omnis. Maiores aperiam nobis aliquid a, consequatur fuga optio dolores reiciendis consequuntur atque in, eaque commodi assumenda!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum qui magnam nihil eligendi veniam explicabo reiciendis eius aut, aliquam, quam consequuntur tenetur sapiente quisquam delectus ab natus odio officia, id laboriosam itaque consequatur omnis. Maiores aperiam nobis aliquid a, consequatur fuga optio dolores reiciendis consequuntur atque in, eaque commodi assumenda!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum qui magnam nihil eligendi veniam explicabo reiciendis eius aut, aliquam, quam consequuntur tenetur sapiente quisquam delectus ab natus odio officia, id laboriosam itaque consequatur omnis. Maiores aperiam nobis aliquid a, consequatur fuga optio dolores reiciendis consequuntur atque in, eaque commodi assumenda!</p>
</div>
</body>
</html>

Benissimo, una volta fatto cio, inseriamo il nostro css tra i tag style oppure nel nostro file css del progetto:

/*Stile del Top Content*/
.top-container {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

/*Stile dell'header*/
.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

/*Stile del Contenuto*/
.content {
  padding: 16px;
}
/*Classe che verrà aggiunta o tolta con il JS*/
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
/*Padding per evitare movimenti improvvisi e rendere piacevole lo scroll*/
.sticky + .content {
  padding-top: 102px;
}

Ora andiamo a scrivere il codice Javascript, che si occuperà di “Togglerare” la classe “Sticky”, intercettando lo sroll della pagina:

// Allo scroll della pagina esegui la funzione
window.onscroll = function() {myFunction()};

// Recupera l'header
var header = document.getElementById("mio_header");

// Recupera l'altezza dell'header tramite la funzione "offsetTop"
var sticky = header.offsetTop;

// Aggiungi o rimuovi la classe sticky quando la quantità di scroll è maggiore (o minore), dell'altezza dell'header

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
} 

Semplice vero? Abbiamo così realizzato lo “sticky header” che risulta molto comodo in quanto lascia sempre visibile quello che poi potrà diventare un menu.

Se vi siete perso il tutorial precedente dove realizzavamo il loader di facebook, vi invito a leggerlo e magari a lasciare un commento.

Spero che anche questo tutorial vi sia piaciuto, non dimenticate di lasciare un like su facebook, e perchè no, se vi è piaciuto tanto tanto tanto, condividetelo con gli amici.

Al Prossimo tutorial, buon sviluppo!

Francesco

Lascia un commento