Fixed un menu au scroll

JMERISE
Javascript

Bonjour / Bonsoir,

Je suis entrain de refaire mon site est j'aimerais fixed mon menu en haut au scroll, j'ai chercher sur google est j'avais trouver un code js et je les adapter pour le mien, mais sauf que le code ne veux pas marcher.
J'ai encore cherchez mais je tombe toujour sur le mêm code presque donc je demande votre aide si vous pouvez m'aider.

Voila le code js :

        <script type="text/javascript">
            $(function(){
                $(window).scroll(
                    function () { 
                        if ($(this).scrollTop() > 108) { 
                            $('navbar').addClass("navbarfix"); 
                        } else {
                            $('navbar').removeClass("navbarfix");
                        }
                    }
                );
            });
        </script>

3 réponses

Keisuke
Réponse acceptée

Salut,

Comme dit Phoenix189, il te faut charger jQuery avant ce code. Puis:

  • check que "navbar" soit bien une balise (sinon, fait l'ajustement dans le code js)
  • check également que "navbarfix" soit une classe valide avec le fonctionnement souhaité.

Aussi, pense à donner les erreurs de la console.

Phoenix189

Vous devez charger jQuery (ce code utilise les méthodes de jQuery c'est pas du js pure)

En pure javascript ça peut donner :

<script>
    document.onscroll = function() {
        var el = document.querySelector('.navbar');
        var top = window.pageYOffset || document.documentElement.scrollTop;
        if(top > 108) {
            if(! /navbarfix/.test(el.className)){
                el.className += " navbarfix";
            }
        } else {
            if(/navbarfix/.test(el.className)){
                el.className = el.className.replace(/ navbarfix/, '');
            }
        }

    }
</script>
JMERISE
Auteur

marche pas.