[RÉGLÉ] Créer un menu flottant puis fixe au moment du scrolling de la page

[linceb]

Bonjour,
J'utilise le template Cleanlogic de Crosstec que j'essaie de personnaliser. Ce template utilise un responsive layout et du coup je n'arrive pas à adapter un script que j'ai trouvé sur le net pour avoir la barre de mon top menu flottant. Comme on le voit de plus en plus sur les sites web, lorsqu'on navigue sur la page, le menu reste fixe en haut afin d'être toujours visible par l'internaute.
Je ne sais pas comment adapter ce système sur mon template. Est-ce que je dois le faire sur la navigation ou existe-t-il une extension qui propose ce genre de menu ?
J'ai posté un message sur le forum de Crosstec, mais j'avoue ne pas trop espérer de réponse de leur part car les dernières fois je n'ai eu aucune aide de leur part bien que j'ai pris la formule d'abonnement pro avec assistance sur le forum ...
Donc si quelqu'un ici avait une idée pour m'aider, ce serait sympa
Si jamais ma demande n'est pas claire, vous pouvez voir un exemple ici : http://desgeeksetdeslettres.com/sour..._flottant.html
Merci d'avance pour votre aide

[linceb]

Re : Créer un menu flottant puis fixe au moment du scrolling de la page

Personne pour m'aider ?
J'ai tenté un script trouvé sur d'autres forum mais il ne fonctionne qu'en page d'accueil et je ne comprends pas pourquoi !

Donc la manip utilisée, le menu du template dans le fichier index.php s'affiche de cette façon :

<nav id="navigation">
            <div id="mainMenu">
                <jdoc:include type="modules" name="mainNav" style="xhtml" />
            </div>
        </nav>

dans mon fichier css j'ai créé la classe suivante :

.eqtsidebar {
	position: fixed;
	z-index:10000;
	top:-10px;
}

Puis j'ai créé un fichier js avec ce code :

jQuery(document).ready(function(sidebar) {
var sidebar = $('nav');
var offsetTop = sidebar.offset().top;
     
var floatListenner = function() {
    // Si le haut du navigateur dépasse le haut du menu
    if ($(window).scrollTop() >= offsetTop) { // Position fixe
        var offsetLeft = sidebar.offset().left;
        sidebar.addClass("eqtsidebar");
        sidebar.css('left', offsetLeft);
    // Sinon, le menu reste intégré sous la bannière
    } else { // Position relative
        sidebar.removeClass("eqtsidebar");
    }
};
$(window).scroll(floatListenner);
$(window).resize(floatListenner);
sidebar.removeClass("eqtsidebar");
});

Je ne suis pas sûre que ce script soit tout à fait propre (2 dernières lignes inutiles ?)

Bref, ce truc fonctionne, mais uniquement sur la page d'accueil, ensuite le menu reste dans sa position initiale sur les autres pages et suit le scroll, il disparait donc de l'écran lorsqu'on descend trop bas dans la page.

Quelqu'un aurait une idée ?
Merci

[linceb]

Re : Créer un menu flottant puis fixe au moment du scrolling de la page

Bon,
A force de bidouiller tout ça j'ai fini par trouver qu'il y avait un conflit entre plusieurs script jQuery. J'ai remplacé les $ par jQuery dans mon script.

Finalement ça fonctionne donc !