BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

 > Discussion générale openElement
  Nouveaux messages Nouveaux messages Fil RSS - Menu flottant
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Menu flottant
 Répondre Répondre Page  123>
Auteur
Message
  Sujet Recherche Sujet Recherche  Options des sujets Options des sujets
jjb1 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 27 Feb 2013
Pays: France
Status: Inactif
Points: 848 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer jjb1 Citer  RépondreRéponse Lien Direct à ce Post Sujet: Menu flottant
    Envoyé : 03 Jan 2019 à 15:00
Bonjour à tous, et bonne année,

J'ai beaucoup fouiné sur le forum, mais je n'ai rien trouvé de concret.
Je voudrais que mon menu disparaisse lorsque je vais vers le bas de ma page, et qu'il réapparaisse dès que je remonte, même si je ne suis pas arrivé en haut de page.
Suis-je bien clair ?
D'avance merci de vos conseils.
Mon site-(1.57 R9)
Haut de la page
Goetheus allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 05 Juil 2015
Pays: France
Status: Inactif
Points: 125 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Goetheus Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Jan 2019 à 17:55
Salut et bonne année !

Tu ne peux pas réaliser ce que tu désires en natif sous OpenElement, il va falloir que tu injecte ton propre code pour cela.

Pas trop de le temps de m'y pencher, mais le plus simple c'est un code javascript : deux fonctions, l'une qui s'exécute au scroll down, si ton menu est affiché, après le chargement de la page, et l'autre qui s'exécute à chaque scroll up.

Une recherche google t'aideras ! Je repasserais par ici dès que je pourrais.
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Jan 2019 à 18:49
C'est faisable en bidouillant et détournant 2 éléments.Je vais voir si je peux vous faire ca dans le weekend.

Cordialement
Sensode
Biographie
Haut de la page
jjb1 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 27 Feb 2013
Pays: France
Status: Inactif
Points: 848 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer jjb1 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 07 Jan 2019 à 16:30
Bonjour,
Je reviens après quelques jours d'absence.
Merci de vos réponses.
A l'époque, il y a maintenant longtemps, Larsene m'avait répondu que c'était simple, mais c'en est resté à cette appréciation.
Je vais chercher sur google et reviendrais vous en dire plus.
Mon site-(1.57 R9)
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6513 		Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 08 Jan 2019 à 04:42
1- ajoutez la classe BarreMenu à votre menu

2- ajoutez le code javascript suivant en endbody

var position = $(window).scrollTop(); 
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll > position) {
$('.BarreMenu').fadeOut(500);
} else {
$('.BarreMenu').fadeIn(500);
}
position = scroll;
});

Résultat ici (pour quelques jours seulement)



Edité par Hobby001 - 08 Jan 2019 à 13:21
https://denislafrance.net, Formation vidéo sur OE
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 5049 		Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 08 Jan 2019 à 09:36
Trop fort Hobby !
Les Billets d'une Bobonne Bougonne - Gîte Le Vicus
Haut de la page
jjb1 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 27 Feb 2013
Pays: France
Status: Inactif
Points: 848 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer jjb1 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 08 Jan 2019 à 11:06
Grand merci Hobby,
C'est EXACTEMENT ce que je voulais ; simple, concis et efficace.
Ne me reste plus qu'a mettre en place (ce qui n'est pas gagné, me connaissant).
Je vous tiens informé.
Merci encore.
Mon site-(1.57 R9)
Haut de la page
jjb1 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 27 Feb 2013
Pays: France
Status: Inactif
Points: 848 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer jjb1 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 08 Jan 2019 à 19:59
Je savais bien que je n'y parviendrais pas.
Le test01 fonctionne correctement, mais le test02, qui met en jeu un claque pour le Menu ne fonctionne pas.
Quand je descends et que je remonte, le menu clignote.
Cela m'ennuie, car je dois appliquer ce menu sur une centaine de page, alors que le calque est déjà sur les pages en questions ; donc c'était important pour moi d'intervenir sur UN calque au lieu de CENT pages.
Croyez-vous ce problème solvable ?
D'avance merci de votre aide.
Mon site-(1.57 R9)
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6513 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 08 Jan 2019 à 20:47
Sut test02 vous avez le code deux fois , commencez par en enlever une

<script type="text/javascript">
var position = $(window).scrollTop(); 
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll > position) {
$('.barremenu').fadeOut(500);
} else {
$('.barremenu').fadeIn(500);
}
position = scroll;
});
var position = $(window).scrollTop(); 
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll > position) {
$('.barremenu').fadeOut(500);
} else {
$('.barremenu').fadeIn(500);
}
position = scroll;
});
$(["WEFiles/Image/Skin/28d61833.png","WEFiles/Image/Skin/7e93ed35.png"]).preloadImg();
</script>
</body>
</html>
https://denislafrance.net, Formation vidéo sur OE
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6513 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 08 Jan 2019 à 20:48
Le code fonctionne très bien à partir d'un calque. 

Sur test 01 vous ne l'avez qu'une fois

</div>
<script type="text/javascript">
var position = $(window).scrollTop(); 
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll > position) {
$('.barremenu').fadeOut(500);
} else {
$('.barremenu').fadeIn(500);
}
position = scroll;
});
$(["WEFiles/Image/Skin/28d61833.png","WEFiles/Image/Skin/7e93ed35.png"]).preloadImg();
</script>
</body>
</html>


Edité par Hobby001 - 08 Jan 2019 à 20:51
https://denislafrance.net, Formation vidéo sur OE
Haut de la page
 Répondre Répondre Page  123>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.078 secondes.