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

Question

当我的粘性导航栏文本位于页面顶部时，我需要它是白色的，但是当我向下滚动几个 px 时，我需要将文本更改为黑色（那是因为我使用透明标题背景）

我愿意在这个网站上创建类似导航栏行为https://www.rolex.com

我使用 WordPress Elementor。 我设法让我的导航栏在向下滚动时消失并在向上滚动时弹出。 并在页面顶部透明，否则为白色背景。

Answer 1

由于您使用的是 WordPress - 您可能希望使用 jQuery 来更改导航栏中文本的颜色。

这是代码示例，当您向下滚动并通过 10px 阈值时，它会使您的元素 <a> 和 <p> 变黑，当您位于页面顶部时它又变回白色（准确地说 - 小于 10px顶部，但您可以根据需要更改代码中的断点）。

使用给定的 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);
  }
});

您在哪里收听“滚动”事件并根据标题与页面顶部的相对位置更改颜色。

附：如果您使用 EcmaScript 5 版本，请随意将 const 更改为 var。但总的来说，你应该没问题。

Answer 2

如果我理解正确，你想要这样的东西（我没有使用纯 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 3

你的意思是这样的？

由于您没有在答案中添加代码，我无法具体说明您的代码，但也许我的代码会帮助您根据我的示例调整您的代码。

您可以根据需要更改的导航栏颜色

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