Hello, aujourd’hui, un peu en retard (mais on est dimanche et le dimanche on a le droit à la flemme), je vous livre une astuce franchement utile.

Le sticky header

On utilise le js et jquery pour ajouter la class « fixed » au scroll de la page.

Mon html très rudimentaire on peut le dire :


<header id="monstickyheader">
   <nav>Mon menu</nav>
</header>

Le script essentiel pour ajouter la class :


<script>
        var elementPosition = $('#monstickyheader').offset();

        $(window).scroll(function () {
            if ($(window).scrollTop() > elementPosition.top - 50) {
                $('#monstickyheader').addClass('fixed');
            } else {
                $('#monstickyheader').removeClass('fixed');
            }
        });
</script>

Et voilà ! Et non, je ne te donnerai pas le css ! Avec un peu de réflexion, tu trouveras tout seul. Le principal est là. A toi maintenant !

A bientôt