Barre de navigation/header fixe avec jQuery

tutoriel Barre de navigation/header fixe avec jQuery

Niveau
  1. Débutant
Utilisation de la bibliothèque de développement jQuery


Dans ce tutoriel pas-à-pas nous allons concevoir une barre de navigation ou un header fixe et qui, grâce à jQuery se comportera différemment selon le scroll du viewport.
  • Voici le premier bloc de code qui permet de créer la structure de la barre de navigation ainsi que la partie principale du site avec du texte Lorem ipsum...
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="/data/assets/logo/logo192.png" alt="Cocori Web" id="nav-logo">
            </a>
        </div>
        <ul class="navbar-menu">
          <li><a class="navbar-item" href="#">Accueil</a></li>
          <li><a class="navbar-item" href="#">À propos</a></li>
          <li><a class="navbar-item" href="#">Contact</a></li>
        </ul>
    </nav>
</header>
<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.</main>
  • Dans le bloc de code suivant nous mettons en forme la barre de navigation avec CSS
CSS
body {
  margin: 0;
}

nav {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 30;
  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;
}

main {
  padding-top: 240px;
}
  • Préparons la barre de navigation à être dynamisée avec jQuery, on rajoute un peu de code CSS qui va nous permettre de changer la couleur de la barre de navigation lorsque le scroll de la page est au plus bas. (on le rajoute au code CSS existant)
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);
}
  • Maintenant jQuery entre en jeu car le code CSS précédent ne change encore rien au comportement de la barre de navigation. C'est jQuery qui active les modifications CSS.
    • Dans notre code HTML on rajoute le CDN jQuery entre les balises <head> de la page HTML.
    • HTML
      <script
      src="https://code.jquery.com/jquery-3.5.1.min.js"
      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous"></script>
    • Puis le script (toujours dans la page HTML)
    • JavaScript
      $(document).scroll(function() {
      const navbar = $("nav.is-fixed-top");
      navbar.toggleClass('scrolled', $(this).scrollTop() > navbar.height());
      if (navbar.hasClass('scrolled')) {
      $("#nav-logo").attr('src', 'https://cocoriweb.community/data/assets/logo/logo32.png');
      } else {
      $("#nav-logo").attr('src', 'https://cocoriweb.community/data/assets/logo/logo192.png');
      }
      });
Le tutoriel est à présent terminé, vous pouvez constater le résultat dans le bloc ci-dessous en scrollant le texte.



N'hésitez pas à poser des questions dans la discussion de ce tutoriel (lien en haut de page).
Auteur
Nicolas
Affichages
148
Publication
Mise à jour
Notation
0.00 étoiles(s) 0 note(s)
Haut