Jump to content

Recommended Posts

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

  • Like 5

Share this post


Link to post
Share on other sites

Merci titityler !!! :)

 

testé sur FIREFOX en local, fonctionne parfaitement

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by Atch (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by jomcdonald (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Bonsoir, 

 

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

 

Sauf pour moiiiiiiii  :wacko:

 

Je suis en 1.6.0.8 et vous ?? 

Share this post


Link to post
Share on other sites

Bonsoir, 

 

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

 

Sauf pour moiiiiiiii  :wacko:

 

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 !   :(

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by faire-affaires (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 !

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More