[TUTO] Menu qui suit le scroll

[titityler]

Bonjour à tous.

 

Je viens proposé un petit tutoriel qui permet de faire en sorte que le menu suive le scroll de la page pour que le visiteur l'ai toujours sous la main.

 

Editer le fichier : "themes/Nom_de_votre_theme/css/modules/blocktopmenu/css/superfish-modified.css"

 

Ajouter le code suivant avant ".sf-menu {...}"

@media (min-width: 1200px) {
.sf-menu.floatable {
  position: fixed;
  top: 0px;
  width: 1170px; }
}

@media (max-width: 1199px) {
.sf-menu.floatable {
  position: fixed;
  top: 0px;
  width: 970px; }
}

@media (max-width: 991px) {
.sf-menu.floatable {
  position: fixed;
  top: 0px;
  width: 750px; }
}

Ensuite, éditer le fichier : "themes/Nom_de_votre_theme/header.tpl"

 

Ajouter le code suivant avant "</head>"

<script>
var positionElementInPage = $('.sf-menu').offset().top;
$(window).scroll(
    function() {
        if ($(window).scrollTop() >= positionElementInPage) {
            // fixed
            $('.sf-menu').addClass("floatable");
        } else {
            // relative
            $('.sf-menu').removeClass("floatable");
        }
    }
);
</script> 

Normalement, votre menu devrait suivre le scroll

 

Voici mon site pour vous donner une idée : http://www.titityler1.fr/

 

PS : testé sur SAFARI et CHROME sur Prestashop 1.6.0.6

Edited April 23, 2014 by titityler (see edit history)

[icstra]

ca marche nickel....

merci pour le partage.

[sachacourt]

Merci c'est impec.

[Alexgaw]

THank you! It works.

[titityler]

You're welcome

[Zythom]

Salut titityler,

 

je remonte le topic parce que j'ai une question : penses-tu pouvoir faire la même chose avec le barre en haut de site (celle qui contient le numéro de téléphone, connexion, etc...) ?

[titityler]

Bonjour,

 

Je n'ai actuellement plus de serveur avec prestashop installé pour essayer cela.

Si un jour je me relance sur un site perso où il me faudra un serveur, j'essaierai de le faire.

Mais que je pense que cela est possible.

[Zythom]

Merci quand même titityler

 

Je vais voir de mon côté (mais je promets rien vu mes très faibles connaissances )

[titityler]

Bonjour à tous, je viens de passer à prestashop 1.6.0.11 et ca ne marche plus.

J'ai l'impression qu'il ne prend pas en compte le javascript qui est dans le header.tpl au moment où on dépasse le menu avec le scroll.

 

Avez-vous réussi à le faire fonctionner?

 

Merci

[Soyons Solidaire]

Salut TITI, je vais faire un test sur quel ligne "Ajouter le code suivant avant ".sf-menu {...}"" ?

Amitiés

Edited January 20, 2015 by G.Solidarité (see edit history)

[titityler]

Dsl je n'ai pas compris, c'était une question ou une affirmation lol