0
votes

Comment faire du changement de couleur de la barre NAVBAR par défilement

J'ai besoin de mon texte Sticky Navbar pour être blanc quand il est en haut de ma page, mais quand je fais défiler peu de px, j'ai besoin du texte pour passer au noir (c'est parce que j'utilise l'arrière-plan transparent)

Je suis prêt à créer quelque chose comme le comportement de la barre NAVBAR sur ce site https://www.rolex.com

J'utilise WordPress Elementor. J'ai réussi à faire disparaître ma barre Naville lors du défilement et du contexte lors du défilement. et être transparent sur le dessus de la page et de fond blanc autrement.

javascript html css wordpress scroll

0 commentaires

3 Réponses :

0
votes

Puisque vous utilisez WordPress - Vous pouvez utiliser JQuery pour changer la couleur de votre texte dans la barre NAV.

Voici l'exemple de code qui rend vos éléments code> et

code> Tournez le noir lorsque vous faites défiler et passez le seuil de 10px et c'est de retour au blanc lorsque vous sont en haut de la page (avec précision - moins de 10px au sommet, mais vous pouvez modifier le point d'arrêt dans le code à vos besoins). p>

avec le code HTML donné: P>

const yourText = $('.header').find('a, p');
$(window).on('scroll', function () {
  const headerOffset = $('.header').offset().top;
  const breakPoint = 10;
  const defaultColor = 'black';
  if (headerOffset > breakPoint) {
    // you scroll down
    yourText.css('color', 'red');
  } else {
    // you are at the top of the page
    yourText.css('color', defaultColor);
  }
});

0 commentaires

0
votes

Si j'ai bien compris, tu voulais quelque chose comme ça (je n'ai rien utilisé autre que Pure HTML, CSS et JS):

<div id="navbar" class="navbar">I'm gonna change !</div>
<div id="content" class="content"></div>

0 commentaires

0
votes

Vous voulez dire quelque chose comme ça?

Parce que vous n'avez pas ajouté votre code dans la réponse, je ne peux pas spécifiquement votre code, mais peut-être que mon code vous aidera à adapter votre code avec mon exemple. P >

La couleur NAVBAR Vous pouvez modifier si vous voulez P>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header>
	<nav id="navigation" class="navbar navbar-dark bg-primary navbar-fixed-top">		
			<ul class="nav navbar-nav">
				<li class="nav-item"><a href="#" class="nav-link">Site1</a></li>
				<li class="nav-item"><a href="#" class="nav-link">Site2</a></li>
				<li class="nav-item"><a href="#" class="nav-link">Site3</a></li>
			</ul>
	</nav>
</header>

<p>
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
</p>

0 commentaires