如何通过滚动使导航栏文本颜色发生变化

Question

I need my sticky Navbar text to be white when it's on the top of my page, but when I scroll down few px I need the text to change to black (that's because I use transparent header background)

I'm willing to create something like the navbar behavior at this site https://www.rolex.com

I use WordPress Elementor. I've managed to make my navbar disappear when scrolling down and popup when scrolling up. and to be transparent on the top of the page and white background otherwise.

Answer 1

Since you are using WordPress - you might want to use jQuery for changing the color of your text in the navbar.

Here is the code example which makes your elements <a> and <p> turn black when you scroll down and pass 10px threshold and it's back to white when you are at the top of the page (accurately - less than 10px to the top, but you can change the breakpoint in the code to your needs).

With the given HTML code:

<nav class="header">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <p>Company</p>
</nav>

You apply the following JavaScript code:

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);
  }
});

where you listen to "scroll" event and change the color based on the relative position of your header to the top of the page.

PS If you use EcmaScript 5 version feel free to change const to var . But in general, you should be fine.

Answer 2

If I understood right, you wanted something like this (I didn't use anything other than pure HTML, CSS and JS):

 window.onscroll = function() {scrollFunction()}; var navbar = document.getElementById("navbar"); function scrollFunction() { if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { navbar.style.height = "5px"; navbar.style.backgroundColor = "black"; navbar.style.color = "white"; navbar.style.lineHeight = "5px"; } else { navbar.style.height = "20px"; navbar.style.backgroundColor = "gray"; navbar.style.color = "black"; navbar.style.lineHeight = "20px"; } }

 .navbar { width: 100%; height: 20px; padding: 10px; line-height: 20px; position: fixed; top: 0; color: black; background-color: gray; text-align: center; transition: all 0.3s ease; }.content { width: 100%; height: 900px; background-color: #c1c1c1; }

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

Answer 3

You mean something like this?

Because you didn't add your code in the answer, I can't specifically your code, but maybe my code will help you to adapt your code with my example.

The navbar color you can change if you want

 $(function () { $(document).scroll(function () { var $nav = $(".navbar-fixed-top"); $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height()); }); });

 @import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"; body { padding-top: 70px; background: white; }.navbar-fixed-top.scrolled { background-color: white;important: color; black: transition; background-color 200ms linear. }.navbar-fixed-top.scrolled:nav-link { color; black; }

 <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>