Imprimer la Page | Fermez la fenêtre

Menu sticky

Imprimé depuis: Forum openElement
Categorie:

openElement


Nom du Forum: Sites créés avec openElement
Description du Forum: Soumettre votre site aux avis
URL: https://forums.openelement.uk/fr/forum_posts.asp?TID=23956
Date: 28 Mar 2024 à 23:25
Version logiciel: Web Wiz Forums 12.04 - http://www.webwizforums.com


Sujet: Menu sticky
Posté par: disbras
Sujet: Menu sticky
Posté le: 06 Oct 2020 à 17:38
Bonjour,

J'essaie actuellement de rendre le menu de mon site sticky, en utilisant donc le fameux position : sticky;
Seulement, celui-ci ne marche par, alors même que mon élément est dans un panneau d'éléments.

https://www.transfernow.net/Il0TNW102020" rel="nofollow - https://www.transfernow.net/Il0TNW102020

Voici le lien de mon site (version projet), pouvez-vous m'aider s'il vous plait à rendre ce fameux menu sticky s'il vous plait ?

Aussi, j'aurais aimé savoir comment avoir cet effect : https://robkendal.co.uk/blog/2020-04-02-funky-text-backgrounds-with-background-clip-css
J'ai effectué des tests dans un autre fichier, mais ne suis pas parvenu à obtenir le résultat escompté.

Merci beaucoup !!



Réponses:
Posté par: Hobby001
Posté le: 06 Oct 2020 à 18:50
Je suis en train de préparer une vidéo sur le sujet, je crois pouvoir le publier cette semaine


Le menu du site  https://robkendal.co.uk/blog/2020-04-02-funky-text-backgrounds-with-background-clip-css" rel="nofollow - https://robkendal.co.uk/blog/2020-04-02-funky-text-backgrounds-with-background-clip-css   n'a rien de sticky


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: disbras
Posté le: 06 Oct 2020 à 19:22
Bonsoir, le site que j'ai joint était pour un autre effet, celui de texte derrière un texte transparent, j'ai demandé de l'aide pour deux choses en même temps, désolé de ne pas avoir été clair 😅

Alors dans mon site, donc le lien vers le fichier rar, j'aimerais que mon menu stick en haut de l'ecran, une fois qu'on a suffisamment descendu.

Concernant l'autre lien, je me demandais simplement comment obtenir le même effet, n'ayant pas réussi à obtenir un effet analogue.


Posté par: Hobby001
Posté le: 06 Oct 2020 à 20:21
Vous devez travailler au niveau du bloc de texte, lui donner une image de fond puis utiliser le code css suivant:

/* ID du bloc de texte et sous-élément avec la classe ContentBox*/
#WE35e5d44726 .ContentBox {
background-image: url("/Files/Image/couleurs.jpg"); /* Image qui teintera le texte */
-webkit-background-clip: text;
background-clip: text;
color: transparent;  /* Si vous n'avez pas mis la couleur par défaut, ajoutez !important*/
}

Notez que ça n'apparaîtra pas dans la fenêtre de travail d'OpenElement mais ça fonctionnera très bien dans votre navigateur


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: disbras
Posté le: 06 Oct 2020 à 20:27
MMerci beaucoup je vais essayer ca ! Et concernant mon menu sticky avez-vous une idée ?


Posté par: Hobby001
Posté le: 06 Oct 2020 à 20:32
Oui mais je vais faire un tuto vidéo cette semaine là dessus.

Dans votre cas spécifique, faites un back-up de votre projet et envoyez-moi le fichier zip, pas rar.


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: disbras
Posté le: 07 Oct 2020 à 07:20
Bonjour, voici le fichier au format zip, espérant que vous pourrez m'aider pour ce menu sticky !! :)
https://www.transfernow.net/ddl/siteatesterlol" rel="nofollow - https://www.transfernow.net/ddl/siteatesterlol
J'ai aussi essayé d'implementer votre code, cependant je n'arrive pas à le faire marcher, pouvez-vous regarder au passage s'il vous plait ?
Quelle est votre chaine youtube pour que je puisse y faire un petit tour ?


Posté par: Hobby001
Posté le: 07 Oct 2020 à 11:53
Liste de lecture en Français

https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: Hobby001
Posté le: 07 Oct 2020 à 12:30
Pour votre texte, il faut respecter le code fourni.

Dans un bloc de code CSS, quand on utilise l'ID d'un élément au lieu d'un nom de classe CSS, il faut précéder cet ID du symbole dièse # .


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: Hobby001
Posté le: 07 Oct 2020 à 12:46
En ce qui a trait à sticky, il va falloir que j'étudie son comportement dans OE.  Présentement, je suis sur autres choses.

-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: brolysan
Posté le: 07 Oct 2020 à 14:13
Pour sticky, il n'y a rien de compliqué en fait, il faut juste faire attention aux différents panneaux d'élément, et sans oublié que l'on a développé un élément pour ça.

-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie


Posté par: brolysan
Posté le: 07 Oct 2020 à 14:40
Je viens de corriger votre projet, avec l'élément sticky, le voici : https://we.tl/t-NPoyWAxnuO

-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie


Posté par: disbras
Posté le: 07 Oct 2020 à 19:26
Bonsoir, je viens de résoudre mon problème pour le texte, le fond est bien "clippé" !

Je me pose donc une question : comment gérer les navigateurs qui n'ont pas de gestion du background-clip ? (remplacer l'image par une couleur ?)

Aussi, j'ai utilisé :

background-attachment: fixed !important;
background-repeat: no-repeat;
background-position: bottom;

cependant, le texte disparais sous firefox, quand cela marche parfaitement sous edge (à ma grande surprise !)

savez-vous comment résoudre ce souci d'affichage ?

Aussi, je n'ai toujours pas réussi à obtenir un menu sticky, quelqu'un aurait-il une idée ? (En essayant de mettre le menu en fixed, j'ai également remarqué que le fond coloré de ce dernier disparais, j'ai l'impression d'avoir pas mal de problèmes :/)




Posté par: Hobby001
Posté le: 07 Oct 2020 à 19:33
Il vaut mieux ouvrir une publication par sujet.  Ça n'aide en rien de discuter de deux sujets en même temps.

-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: Hobby001
Posté le: 07 Oct 2020 à 19:34
Assurez-vous de mettre à jour les différents navigateurs que vous testez.



-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: disbras
Posté le: 07 Oct 2020 à 19:39
Pas de problème, je vais aller ouvrir un autre sujet ! Concernant mon sujet initial, j'aurais une question, comment intégrer l'élément supplémentaire de brolysan dans n'importe quel fichier open element ? Celui-ci ayant trouvé comment rendre mon menu sticky !

Et quant à mon navigateur, j'ai testé directement de le mettre à jours, mais rien ne change :/


Posté par: Hobby001
Posté le: 07 Oct 2020 à 20:00
Chez-moi tout va bien autant dans Firefox, Edge que Chrome

https://denislafrance.net/essais/GradientText.htm" rel="nofollow - https://denislafrance.net/essais/GradientText.htm



-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: Hobby001
Posté le: 07 Oct 2020 à 20:11
Notez qu'au moment de publier, l'image ne sera pas automatiquement transmise au site WEB.  Vous devrez le faire manuellement.

-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: disbras
Posté le: 07 Oct 2020 à 21:07
Bonsoir,

Concernant le site que vous m'avez envoyé, j'ai exactement ce qu'il faut, le problème intervient avec le fixed du background, qui ne s’affiche pas sur mon firefox, je ne sais pas pourquoi. (derniere mise à jour)

Aussi, comment importer un élément dans open element ? Tel que celui de brolysan ?


Posté par: Hobby001
Posté le: 07 Oct 2020 à 21:11
Sticky n'a pas été proposé dans la liste des éléments complémentaires alors il faudrait trouver qui veut le partager.

http://forum.openelement.com/fr/forum_posts.asp?TID=22573&title=liste-des-lments-proposs" rel="nofollow - http://forum.openelement.com/fr/forum_posts.asp?TID=22573&title=liste-des-lments-proposs


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: brolysan
Posté le: 07 Oct 2020 à 21:14
ca sert à quoi que je donne le lien avec l'élément du coup? Cry

-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie


Posté par: Hobby001
Posté le: 07 Oct 2020 à 21:14
Message posté par Hobby001 Hobby001 a écrit:

Notez qu'au moment de publier, l'image ne sera pas automatiquement transmise au site WEB.  Vous devrez le faire manuellement.


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: disbras
Posté le: 07 Oct 2020 à 21:15
Auriez-vous une idée de comment l'installer depuis le dll ?


Posté par: disbras
Posté le: 07 Oct 2020 à 21:16
c'est simplement parce que j'avais déjà modifié des choses sur ma page Confused


Posté par: Hobby001
Posté le: 07 Oct 2020 à 21:28
Message posté par disbras disbras a écrit:

Auriez-vous une idée de comment l'installer depuis le dll ?

La dll doit être mise dans le dossier Common/Elements


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: brolysan
Posté le: 07 Oct 2020 à 21:56
c'est une blague les gars? J'ai donné le lien pour récupérer le projet avec la dll et le sticky activé....Ouch

-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie


Posté par: Hobby001
Posté le: 07 Oct 2020 à 22:01
Message posté par brolysan brolysan a écrit:

c'est une blague les gars? J'ai donné le lien pour récupérer le projet avec la dll et le sticky activé....Ouch

En fait, je crois que ce qu'il a envoyé n'est pas le vrai projet et qu'il doit transférer le tout dans un autre.


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: disbras
Posté le: 08 Oct 2020 à 06:58
En fait le projet a été beaucoup avancé dans la journée, et je ne savais pas comment transférer l'élément de brolysan, désolé du temps que tu as pris pour moi.... Du coup ce que j'ai fait c'est continuer mes expérimentations sur une copie de mon site moins avancée, et avancé le reste sur l'original.

Juste une question, après avoir mis l'élément dans common elements, son utilisation m'est impossible, il affiche du texte sur ma page, et ne me permet pas d'avoir l'effet voulu


Posté par: disbras
Posté le: 08 Oct 2020 à 07:06
je viens finalement de réussir, merci beaucoup ! (mon problème venait d'un morceau de code non désactivé)


Posté par: disbras
Posté le: 08 Oct 2020 à 07:14
j'utilise actuellement ce code :

(function(){

  var parallax = document.querySelectorAll(".ContentBox"),
      speed = 0.5;

  window.onscroll = function(){
    [].slice.call(parallax).forEach(function(el,i){

      var windowYOffset = window.pageYOffset,
          elBackgrounPos = "50%" + (windowYOffset * speed) + "px";

      el.style.backgroundPosition = elBackgrounPos;

    });
  };

})();

et j'aimerais savoir comment faire pour que le défilement commence du bottom de mon image, j'ai essayé de changer la valeur du 5%, mais n'ai pas réussi à obtenir l'effet escompté.



Imprimer la Page | Fermez la fenêtre

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net