<a> 的字体颜色在 toggleClass() 上没有改变答案

【问题标题】：Font color of <a> not changing on toggleClass()<a> 的字体颜色在 toggleClass() 上没有改变
【发布时间】：2017-07-13 21:25:35
【问题描述】：

我正在创建一个 html 网站，该网站顶部有一个菜单，该菜单应该具有透明背景，并且菜单项应具有黑色字体颜色，当位于滚动视图顶部并淡入红色背景时，带有白色字体颜色，当用户向下滚动时。为此，我在我的 javascript 文件 main.js 中编写了这个函数：

window.onscroll = function () {
    if (window.scrollY === 1 || window.scrollY === 0) {
        $(".menu").toggleClass("scroll");
        $(".menu a, li").toggleClass("fontScroll");
    }
};

fontScroll 是我的 CSS 中的一个函数，它可以将我的菜单项的字体颜色从原始颜色黑色更改为白色，其功能如下：

.fontScroll {
    color: rgb(250,250,245);
}

我的菜单中有三个列表项，一个标题和两个链接，由于某些奇怪的原因，标题是唯一变成白色的东西，链接保持相同的颜色。我做错了吗？

哦，顺便说一句，我已经尝试设置 a:visited 和 a:link，但没有成功。

如果您有兴趣，我已经为我的问题创建了一个codepen。

提前致谢：)

【问题讨论】：

HTML 代码会很有帮助。另外，我假设$(".menu a, li") 是这个$(".menu a li")
您是否在滚动跟踪.menu a 中的课程fontScroll。？

标签： javascript jquery css fonts

【解决方案1】：

这里有解决方案https://codepen.io/Shiladitya/pen/jwdzxq

/*jslint browser: true*/
/*global $, jQuery, alert*/

function main() {
    "use strict";
    window.onscroll = function () {
      if (window.scrollY === 1 ||                   window.scrollY === 0) {
        $(".menu").toggleClass("scroll");
        $(".menu a, li").toggleClass("fontScroll");
    }
  };
}

$(document).ready(main);

.font {
	color: rgb(50, 50, 50);
	text-decoration: none;
}

.menu a:hover {
	color: rgb(100, 100, 100);
}

.menu {
	overflow: hidden;
	position: fixed;
	background-color: rgba(179, 0, 0, 0);
	height: auto;
    top: 0;
    left: 0;
    right: 0;
	z-index: 100;
    transition: all 0.4s;
}

.menu #title {
	font-size: 35px;
}

.menu #home {
    margin-right: 6%;
    margin-left: 12%;
}

.menu #about {
    margin-right:0;
}

.menu li {
	display: inline-block;
    transition: all 0.4s;
}

.spaceForScroll {
    width: 100%;
    height: 1500px;
}

.scroll {
    background-color: rgba(179, 0, 0, 0.8);
    transition: all 0.4s;
}

.fontScroll {
    color: rgb(250,250,245);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
	<head>
		<link href="style.css" type="text/css" rel="stylesheet">
     <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="main.js"></script>
	</head>

	<body>
		<nav class="menu"> 
			<ul id="titles">
				<li id="title">Title</li>
				<li id="home"><a class="font" href="index.en.html">Home</a></li>
				<li id="about"><a class="font" href="about.en.html">About</a></li>
			</ul>
    </nav>
    <div class="spaceForScroll"></div>
  </body>
</html>

我使用类而不是定位元素。

【讨论】：