如何在滚动时更改导航栏的文字颜色?

时间:2017-10-04 22:32:21

标签: jquery css wordpress

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

任何人都可以帮助我吗?感谢

1 个答案:

答案 0 :(得分:1)

刚刚找到了实现这一目标的简单方法。只需进入主题定制器 - &gt;标题和导航 - &gt;固定导航设置并将主菜单链接颜色设置为您想要滚动菜单字体的任何颜色。然后,在主题定制器 - &gt;标题和导航 - &gt;主菜单栏,在滚动之前将文本颜色设置为您希望菜单文本的颜色。

效果很好。