如何更改滚动时的导航栏文本颜色？答案

【问题标题】：How can I change the navbar's text color on scroll?如何更改滚动时的导航栏文本颜色？
【发布时间】：2017-10-04 22:32:21
【问题描述】：

在 WordPress 的 Divi 主题中，我一直在尝试让导航栏（主菜单）中的字体颜色在滚动时发生变化。我正在使用脚本和 CSS 使导航栏的背景颜色在滚动时更改，但我无法更改字体。我已经尝试在滚动上更改字体系列，它可以工作，但由于某种原因，颜色不会让步。导航栏的背景颜色也会在滚动时正确更改。

在 Divi Theme Customizer 中，字体颜色设置为白色。 CSS 应该在滚动时覆盖它，但它没有这样做。

这里是 CSS：

.opaque-header { //on scroll
 color: black !important; //change color on scroll
 font-family: Impact; //test to see if font family has an impact
 background-color: rgba(255,255,255,0.8) !important;
 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.0);
 -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.0);
 -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.0);
 }

.transparent-header { //the header before scroll
 background-color: rgba(255, 255, 255, 0.0) !important; //transparent bg
 box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
 }

这是脚本：

<script type="text/javascript">
 (function($) {

var cover_section = '#cover-section',
 top_header = '#top-header, #et-secondary-nav',
 header = '#main-header';

$(window).bind('scroll', function() {

if ($(window).scrollTop() > 0) {
 $(header).addClass('opaque-header');
 $(header).removeClass('transparent-header');
 $(top_header).addClass('opaque-header');
 $(top_header).removeClass('transparent-header');
 } else {
 $(header).removeClass('opaque-header');
 $(header).addClass('transparent-header');
 $(top_header).removeClass('opaque-header');
 $(top_header).addClass('transparent-header');
 }
 });

$(document).ready(function() {
 top_header = '#top-header, #et-secondary-nav';
 header = '#main-header';
 $(header).addClass('transparent-header');
 $(top_header).addClass('transparent-header');
 if ($(cover_section).length) $('body').addClass('cover-active');
 });

$(window).load(function() {
 if ($(cover_section).length) set_viewport_height($(cover_section));
 });

$(window).resize(function() {
 if ($(cover_section).length) set_viewport_height($(cover_section));
 });

function set_viewport_height(element) {
 var viewport_height = $(window).height();

if ($('#wpadminbar').length) var viewport_height = viewport_height - $('#wpadminbar').innerHeight();

$(element).height(viewport_height);
 };

})(jQuery);
 </script>
 <script type="text/javascript">
 (function($) {

$(window).load(function() {
 $('#divi-loading').fadeOut(500);
 });

})(jQuery);
</script>

谁能帮帮我？谢谢

【问题讨论】：

您需要为菜单链接定位a 标签，而不仅仅是包装元素的全局字体颜色。没有看到 HTML，它应该是这样的 .opaque-header a { //on scroll color: black !important; ...
@disinfor 感谢您的回复，但我刚刚尝试过，它仍然没有工作。我为文本颜色创建了一个单独的 CSS 选择器，.opaque-header a { color: black !important; }然后我在脚本中需要的地方添加了额外的$header.addClass('opaque-header a');。导航栏的行为相同。还有什么建议吗？
你不需要额外的 js：$header.addClass('opaque-header a') 所做的只是在你的#main-header 中添加一个a 类。您只需要针对 #main-header 中的链接元素的 CSS。尝试创建像.opaque-header #et-top-navigation #top-menu-nav #top-nav li > a { color: black !important; } 这样的CSS 规则，这有点多，但希望你能做到。如果这没有帮助，请将#main-header HTML 发布到您的问题中。
@disinfor 谢谢，我终于明白了。不需要额外的 CSS 规则；删除多余的 js 后，我意识到字体正在改变颜色一秒钟 - 直到导航栏在滚动时缩小。我添加了一个脚本来防止这种情况发生。
很高兴你明白了！

标签： jquery css wordpress

【解决方案1】：

刚刚找到了一个简单的方法来实现这一点。只需进入主题定制器 -> 标题和导航 -> 固定导航设置，然后将主菜单链接颜色设置为您希望菜单字体滚动的任何颜色。然后，在 Theme Customizer -> Header and Navigation -> Primary Menu Bar 中，将文本颜色设置为您希望菜单文本在滚动前显示的颜色。

完美运行。

【讨论】：