WhatZeWeb

Dans ce tutoriel, nous allons voir comment faire une barre de navigation fixe, qui change d'apparence lorsqu'elle se trouve au-dessus du contenu du site, avec HTML, CSS et jQuery.

 

Commençons par créer la structure HTML :

<header>
    <nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a href="#" class="navbar-item">
                <img src="https://i.postimg.cc/7hXXKyz2/dark-bg-whatzeweb.png" alt="WhatZeWeb" id="nav-logo">
            </a>
        </div>
        <ul class="navbar-menu">
          <li><a class="navbar-item" href="#">Home</a></li>
          <li><a class="navbar-item" href="#">About</a></li>
          <li><a class="navbar-item" href="#">Contact</a></li>
        </ul>
    </nav>
</header>
<main role="main">
    <!-- Ici, le contenu principal de notre site -->
</main>

Nous avons donc notre navbar <nav> qui comprend deux "blocs" : le premier, dans lequel nous avons placé le logo, et le second, qui contient notre menu de navigation.

Quant à <main>, il viendra accueillir le contenu principal de notre page.

A présent, ajoutons un peu de CSS :

body {
  margin: 0;
}

nav {
  background-color: rgb(0, 153, 204);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em;
}

.navbar-brand {
  display: flex;
}

#nav-logo {
  margin: auto;
}

.navbar-menu {
  list-style: none;
  display: flex;
}

.navbar-menu > li {
  margin-left: 2em;
}


.navbar-item {
  color: rgb(252, 252, 252);
  text-decoration: none;
}

 

Pour que l'on puisse visualiser les effets des prochaines modifications que nous allons faire, ajoutons du lorem ipsum dans notre balise <main> afin d'avoir la barre de défilement verticale :

<main role="main">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel posuere nibh. Aliquam gravida, erat vitae vulputate tincidunt, justo nulla iaculis dui, sed varius ligula erat a nisi. Nullam ut dui eleifend, suscipit massa non, dignissim turpis. Donec quis metus vitae quam tempor imperdiet. Suspendisse gravida augue venenatis, pellentesque enim sit amet, bibendum quam. Sed hendrerit velit sit amet consectetur dapibus. Nullam ligula lectus, facilisis eu est sed, molestie maximus eros. Morbi at posuere leo. Integer rutrum sem a turpis eleifend luctus. Duis sollicitudin mauris sit amet quam sodales, et sagittis lacus tincidunt.

    Phasellus et eros gravida, porttitor ex et, aliquet dui. Duis imperdiet fringilla lectus ac vulputate. Fusce ornare nec tellus sit amet convallis. Phasellus ultrices ex at luctus sodales. Mauris blandit dictum massa. Aliquam nec nunc nec est volutpat auctor. Suspendisse odio lorem, ullamcorper et risus non, mollis viverra sapien. Etiam faucibus varius porta. Nullam velit magna, tempor sed tristique at, varius in nunc. Nunc pulvinar egestas augue, vitae elementum tellus commodo ut. Phasellus nec sapien non nisl dignissim tempor.

    Etiam eget libero turpis. Suspendisse potenti. Donec accumsan libero quis finibus auctor. Morbi hendrerit lectus ante, tempus elementum sapien tincidunt eget. Nam venenatis ex eget risus tincidunt, quis sodales ligula laoreet. Sed dapibus ultricies nisi, ac iaculis diam aliquam quis. Nunc sed velit in purus eleifend maximus in in ligula. Morbi tortor velit, malesuada in facilisis eget, sollicitudin eget tellus. Praesent vitae consectetur odio, varius luctus metus. Aenean vitae finibus ipsum. Sed sed mauris massa. Mauris tempor purus sed leo sagittis sagittis. Fusce sed turpis sed tellus pretium dignissim. Aliquam erat volutpat.

    <!-- A répéter autant que nécessaire pour obtenir la barre de défilement vertical ;) -->
</main>

 

A présent, fixons notre barre de navigation :

nav {
  /* Code précédent */
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 30;
}

Nous avons donc utiliser la propriété position, avec la valeur fixed, pour que notre navbar garde toujours la même position sur la partie visible de la fenêtre, les propriétés top, left et right pour la positionner correctement. Quant à z-index, nous lui donnons la valeur de 30 (mais cela aurait pu être plus, ou moins, tant qu'elle est supérieure à d'autres éventuels z-index sur la page) pour nous assurer que notre barre passe par-dessus le contenu du site.

D'ailleurs, notre barre se positionne tant et si bien que du coup, on ne voit plus le début de notre texte. Résolvons ce souci de suite en ajoutant un padding-top à notre <main>, d'une valeur légèrement supérieure à la hauteur de notre barre de navigation :

main {
  padding-top: 250px;
}

Et voilà ! Notre barre de navigation est désormais fixée en haut de notre fenêtre, même si l'on fait défiler celle-ci vers le bas.

 

Nous allons à présent faire en sorte que cette navbar change d'apparence lorsqu'elle se trouve au-dessus du contenu.

Nous allons modifier la couleur de fond, la couleur de la police, et également le logo, pour qu'il soit plus petit et que l'ensemble perturbe moins la lecture.

Commençons par définir ces nouvelles règles côté CSS :

nav.is-fixed-top.scrolled {
    background-color: rgba(252, 252, 252, .9);
    transition: background-color 200ms linear;
}

nav.is-fixed-top.scrolled .navbar-item {
  color: rgb(0, 153, 204);
}

Comme vous pouvez le voir, pour le moment, il ne se passe rien : j'ai simplement défini une nouvelle classe .scrolled, qui redéfinit certains styles de notre navbar.

Cette classe, nous allons l'ajouter à notre navbar dynamiquement, avec jQuery, lorsque le scroll sera détecté :

$(document).scroll(function () {
  const navbar = $("nav.is-fixed-top");
  navbar.toggleClass('scrolled', $(this).scrollTop() > navbar.height());
});

Voyons ensemble ces quelques lignes :

• $document.scroll() nous permet de détecter le scroll ;
• La méthode toggleClass nous permet d'ajouter (ou de supprimer) la classe passée en premier argument ;
• Le second argument renvoie un booléen : ici, nous ne choisissons d'ajouter la classe scrolled à notre navbar que si nous avons scrollé d'au moins sa hauteur.

 

Notre barre de navigation est presque terminé, ajoutons une dernière modification : modifions le logo lors du défilement, afin de le remplacer par un plus petit (et plus adapté au niveau des couleurs) :

$(document).scroll(function() {
    // Code précédent
    if (navbar.hasClass('scrolled')) {
        $("#nav-logo").attr('src', 'https://i.postimg.cc/kX4y7z8T/favicon-32.png');
    } else {
        $("#nav-logo").attr('src', 'https://i.postimg.cc/7hXXKyz2/dark-bg-whatzeweb.png');
    }
});

Ici, le code est assez simple : si notre navbar a la classe scrolled, alors on modifie l'attribue src de l'image (#nav-logo) pour afficher la petite version. Sinon (par défaut, ou lorsque l'on remonte dans la page), on affiche la grande.

 

Et voilà, ce tutoriel est terminé ! N'hésitez pas à consulter la documentation pour en savoir plus sur les différentes méthodes utilisées.

Vous pouvez voir le résultat ainsi que le code complet de ce tuto sur CodePen.