Как изменить цвет текста Navbar с помощью прокрутки

Question

Мне нужно, чтобы мой липкий текст Navbar был белым, когда он находится в верхней части моей страницы, но когда я прокручиваю несколько пикселей вниз, мне нужно изменить текст на черный (это потому, что я использую прозрачный фон заголовка)

Я готов создать что-то вроде поведения navbar на этом сайте https://www.rolex.com

Я использую WordPress Elementor. Мне удалось заставить свою навигационную панель исчезать при прокрутке вниз и всплывающем при прокрутке вверх. и быть прозрачным в верхней части страницы и в противном случае на белом фоне.

Answer 1

Если я правильно понял, вы хотели что-то подобное (я не использовал ничего, кроме чистого HTML, CSS и 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 2

Вы имеете в виду что-то вроде этого?

Поскольку вы не добавили свой код в ответ, я не могу конкретно указать ваш код, но, возможно, мой код поможет вам адаптировать ваш код на моем примере.

Цвет панели навигации, который вы можете изменить, если хотите

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

Answer 3

Поскольку вы используете WordPress - вы можете использовать jQuery для изменения цвета вашего текста в панели навигации.

Вот пример кода, который заставляет ваши элементы <a> и <p> становиться черными при прокрутке вниз и превышать пороговое значение 10px, и становится белым, когда вы находитесь в верхней части страницы (точно - меньше чем на 10 пикселей выше, но вы можете изменить точку останова в коде в соответствии с вашими потребностями).

С указанным кодом HTML:

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

Вы применяете следующее JavaScript код:

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

, где вы слушаете событие «прокрутки» и меняете цвет в зависимости от относительного положения вашего заголовка к верхней части страницы.

PS Если вы используете EcmaScript 5 версию не стесняйтесь изменить const на var. Но в целом с тобой все должно быть в порядке.