[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

[Zythom]

Merci titityler !!!

 

testé sur FIREFOX en local, fonctionne parfaitement

[BriceVanZeg]

Bravo Titityler.. Et Merci..
Ca marche sans probleme.!
Merci d avoir partagé.

Brice

[sachacourt]

Merci c'est impeccable.

 

Bonne journée

[yannsarah]

super merci ca marche impeccable

[gillescolle]

Bonjour,

 

j'ai testé cela et cela fonctionne très bien pour prestashop 1.6,

 

merci beaucoup.

 

 

est-ce que quelqu'un a idée si c'est possible avec prestashop 1.5.x ?

 

 

Merci beaucoup

[Atch]

Bonjour,

 

Prestashop 1.6 embarque bootstrap 3.0 qui propose une multitude de fonctionnalité dont "affix" qui permet de fixer un contenu.

Une ligne de js suffit pour réaliser ce genre de fonctionnalité... Pensez y

 

http://getbootstrap.com/javascript/#affix

 

PS : merci titityler pour le partage, c'est sympa

 

V++

 

Atch

Edited July 17, 2014 by Atch (see edit history)

[gillescolle]

Merci Atch.

 

il est vrai que 1.6 est très convivial.

 

 

Je reste cependant bloqué avec une version 1.5 où je n'ai pas de solutions pour fixer le menu en fonction de la scroll bar.

 

J'utilise le module de base "blocktopmenu".

 

 

Si quelqu'un passe par là et peut éclairer ma lanterne.

 

Merci à tous

[jomcdonald]

Parfait, j'avais pour projet de mettre en place une telle fonction et c'est parfait.

Je l'ai adapté pour que ça  ne fonctionne que sur les pages catégories et liste de produit et que  ça prenne la totalité du header et ça marche impec.

 

Merci

Edited July 17, 2014 by jomcdonald (see edit history)

[houin]

Parfait, j'avais pour projet de mettre en place une telle fonction et c'est parfait.

Je l'ai adapté pour que ça  ne fonctionne que sur les pages catégories et liste de produit et que  ça prenne la totalité du header et ça marche impec.

 

Merci

Bonsoir pouvez vous me dire comment vous avez fait.Car je veux l'adapter.Merci

[lokiiy]

Bonsoir, 

 

Ravi de voir que ca fonctionne pour tout le monde !! 

 

Sauf pour moiiiiiiii 

 

Je suis en 1.6.0.8 et vous ?? 

[Bastium]

Bonsoir, 

 

Ravi de voir que ca fonctionne pour tout le monde !! 

 

Sauf pour moiiiiiiii 

 

Je suis en 1.6.0.8 et vous ?? 

 

Bonsoir lokiiy,

 

Je suis en 1.6.0.9 et pareille que toi ça fonctionne pas pour moi !  

[Style-Idea]

Ça fonctionne parfaitement bien sur 1.6.0.8 et 1.6.0.9, merci Titityler.

[Bastium]

J'ai trouvé une solution pour moi dans un autre post, il faut changer le .js du superfish.

Je la partage si d'autre sont dans le même soucis que moi en 1.6.0.9.

Lien du post ici

[lokiiy]

Toujours impossible à faire fonctionner pour moi même en suivant toutes les astuces 

[Col&gram]

Merci

[faire-affaires]

Bonjour,

Fonctionne chez moi en local en 1.6.0.9.

Cependant, j'ai une petite question : 

Je souhaiterai UNIQUEMENT que ce soit la bannière qui reste fixe (blocbanner).

J'ai tenté d'insérer "position : fixed;" et effectivement ma bannière reste fixe mais durant un scroll, c'est moche, la case de recherche, le logo et d'autres éléments passent devant cette bannière.

J'espère que vous pourrez éclairer la lenterne d'un newbie de chez newbie...

 

Merci

Edited November 19, 2014 by faire-affaires (see edit history)

[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

[Inspiration Verte]

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

 

Hello Titityler !

As-tu trouvé une solution pour que le scroll fonctionne avec la mise à jour ?

Merci d'avance !

[votre-evenement.be]

Bonsoir,

 

la solution pour prestashop 1.6.0.14 :

 

juste après "responsiveflagMenu = true;" dans votre-thème->js->modules->blocktopmenu->jsblocktopmenu.js

 

ajouter:

 

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

 

dans votre-thème->css->global.css

 

ajouter :

@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; }
}

 

recompiler ne fait pas de mal et le tour est joué ;-)

 

Bonne soirée

[votre-evenement.be]

Hello Titityler !

As-tu trouvé une solution pour que le scroll fonctionne avec la mise à jour ?

Merci d'avance !

 

Bonsoir,

 

la solution pour prestashop 1.6.0.14 :

 

juste après "responsiveflagMenu = true;" dans votre-thème->js->modules->blocktopmenu->jsblocktopmenu.js

 

ajouter:

 

var positionElementInPage = $('.sf-menu').offset().top;

        $(window).scroll(

            function() {

                if ($(window).scrollTop() >= positionElementInPage) {

                    // fixed

                    $('.sf-menu').addClass("floatable");

                } else {

                    // relative

                    $('.sf-menu').removeClass("floatable");

                }

            }

        );

 

dans votre-thème->css->global.css

 

ajouter :

@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; }

}

 

recompiler ne fait pas de mal et le tour est joué ;-)

 

Bonne soirée

[Inspiration Verte]

Bonjour, 

J'ai intégré toutes les modifications mais rien ne change au niveau du menu.

Recompiler semble nécessaire. Comment puis-je faire ?

Merci d'avance !

[votre-evenement.be]

Bonjour, 

J'ai intégré toutes les modifications mais rien ne change au niveau du menu.

Recompiler semble nécessaire. Comment puis-je faire ?

Merci d'avance !

 

dans paramètres avancés -> performances

[Lyn&Or Bijoux]

Merci beaucoup pour ce tuto super facile et efficace.

l'effet est vraiment sympa

testé sur prestashop 1.6.1.12 - thème par défaut

 

Marilyne

[akhawat]

bonjour 

marche egalement en 1.6.1.17 

seul bémol c'est que mon menu qui etait centré à la base se cale a gauche lors du scroll, pouvez vous m'aider a corriger cela ?

merci par avance