Hello hello,

Je suis en train de développer un site avec Wordpress et j'ai un souci de background-color au scroll.
J'ai un bouton dont le fond est semi-transparent et qui est en position Fixed (en bas à droite). Il y a aussi un footer avec la couleur de background noir.
Vous vous en doutez, quand le scroll fait que le Footer arrive par-dessous la div/bouton, on ne voit plus le bouton !

Je souhaite savoir s'il est possible de changer la couleur du background et du texte du bouton quand et seulement quand le footer arrive au niveau de ce bouton. Je voudrais éviter d'utiliser Javascript, c'est pour ça que je poste dans ce forum CSS

Ci-joint une capture de ce que ça donne et un bout de code HTML/CSS.
Merci

.elementor-6882 .elementor-element.elementor-element-d346945 .btn-icon {
  color: var( --e-global-color-primary );
  fill: var( --e-global-color-primary );
  background: #27273A33;
}

<div class="lqd-stickybar-wrap" data-element_type="container">
<div class="e-con-inner">
<div class="elementor-element" data-element_type="widget">
<div class="elementor-widget-container">
<a class="elementor-button"><span class="btn-icon" style=""><svg .....></svg></span></a>
</div>
</div>
</div>
</div>

-
Edité par Macchu 12 décembre 2024 à 10:28:40

Bonsoir,

>> J'ai un bouton dont le fond est noir

Sur votre capture la couleur de fond est grise pas noir. Et on dirait que le footer de couleur noir passe par dessus de ce bouton. Ce qui me fait dire que, comme ce bouton est positionner, il peut recevoir un z-index supérieur au z-index du footer. Ce qui aura pour effet de rendre le bouton visible par dessus le footer. 

https://developer.mozilla.org/fr/docs/Web/CSS/z-index

Merci pour votre retour
Le bouton n'est pas noir en effet, il est en fond semi-transparent (#00000020) et le il passe bien par-dessus le footer, je connais z-index

Ma question est toujours d'actualité.

AbcAbc6 a écrit:

Bonsoir,

>> J'ai un bouton dont le fond est noir

Sur votre capture la couleur de fond est grise pas noir. Et on dirait que le footer de couleur noir passe par dessus de ce bouton. Ce qui me fait dire que, comme ce bouton est positionner, il peut recevoir un z-index supérieur au z-index du footer. Ce qui aura pour effet de rendre le bouton visible par dessus le footer. 

https://developer.mozilla.org/fr/docs/Web/CSS/z-index

Bonjour,

Un ombrage clair autour de la boite et du texte peut aider à faire apparaitre le contour de la boite et du texte sur un fond foncé.

box-shadow:0 0 0 1px #E6F0EF88;
-webkit-text-stroke:1px#E6F0EF88

ou un text-shadow pour le texte.

demo https://codepen.io/gc-nomade/pen/KwPgrab

Bonjour,

Merci pour ton retour. Mais comme je l'indiquais plus haut Je souhaite savoir s'il est possible de changer la couleur du background et du texte du bouton quand et seulement quand le footer arrive au niveau de ce bouton. Je voudrais éviter d'utiliser Javascript, c'est pour ça que je poste dans ce forum CSS.

Savez-vous si cela est possible ?
Si oui, je veux bien avoir l'info

Pour modifier la couleur d'un bouton fixe lorsque celui-ci chevauche le pied de page, il est nécessaire d'utiliser JavaScript, car le CSS seul ne permet pas de détecter l'intersection de deux éléments.

Une solution consiste à ajouter un écouteur d'événement sur le défilement de la page pour vérifier la position du bouton par rapport au pied de page et ajuster son style en conséquence.

Tu peux essayer ça si ça peut t'aider :

window.addEventListener('scroll', function() {
  var button = document.querySelector('.elementor-button');
  var footer = document.querySelector('footer');
  var buttonRect = button.getBoundingClientRect();
  var footerRect = footer.getBoundingClientRect();

  if (buttonRect.bottom > footerRect.top) {
    button.style.backgroundColor = '#ffffff'; // Nouvelle couleur de fond
    button.style.color = '#000000'; // Nouvelle couleur du texte
  } else {
    button.style.backgroundColor = '#27273A33'; // Couleur de fond initiale
    button.style.color = 'var(--e-global-color-primary)'; // Couleur du texte initiale
  }
});

Macchu a écrit:

Bonjour,

Merci pour ton retour. Mais comme je l'indiquais plus haut Je souhaite savoir s'il est possible de changer la couleur du background et du texte du bouton quand et seulement quand le footer arrive au niveau de ce bouton. Je voudrais éviter d'utiliser Javascript, c'est pour ça que je poste dans ce forum CSS.

Savez-vous si cela est possible ?
Si oui, je veux bien avoir l'info

quel effet souhaites tu au moment ou le lien est à cheval sur le footer, ce que je te propose ne fait qu'aider visuellement à voir et lire ce lien.

en JavaScript, tu vas devoir décider du moment ou la couleur change ,

• juste avant d'entrer dans la zone du footer, 
• à X pixel  du footer en arrivant sur la zone 
• ou une fois entièrement dans la zone.

Si le changement de couleur contraste avec tous les fonds, alors un changement juste avant conviendrait je pense.

Si l'idée est de passer à de foncer à clair, il y aura ce petit espace entre le moment ou il arrive au dessus du footer et le moment ou il est entièrement dessus ... si on peut continuer à scroller vers le bas pour amener ce lien entièrement sur la zone du footer. (le rendu dans ton/tes écran(s) n'est pas forcément le même partout ailleurs).

C'est pourquoi, je ne t'ai pas proposé de solution JavaScript en attendant que tu teste cette possibilité et que tu y trouve tes pour et tes contre.

Comme te l'indique @mrorenge , CSS ne peut pas interagir avec le document ni la fenêtre de ton navigateur. Ce n'est qu'une liste de sélecteur et de règle appliqué au document en cours par le navigateur . Si le navigateur trouve une concordance entre le DOM du document (structure HTML) et un sélecteur, alors il applique les régles CSS contenu dans le(s) sélecteur(s) qui concorde(nt).

Cdt

-
Edité par gcyrillus 16 décembre 2024 à 23:01:30