如何在滾動條上更改導航欄的文字顏色？

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

誰能幫助我嗎？謝謝

來源

2017-10-04 ixsearchwell

您需要爲菜單鏈接定位'a'標籤，而不僅僅是包裹元素的全局字體顏色。沒有看到HTML，它應該是這樣的'.opaque-header a {//滾動 color：black！important; ...' – disinfor

@disinfor感謝您的迴應，但我只是嘗試了這一點，它仍然無法正常工作。我爲文本顏色創建了一個單獨的CSS選擇器，'.opaque-header a {color：black！important; }'然後我添加了額外的'$ header.addClass（'opaque-header a'）;'腳本中需要的地方。導航欄的行爲相同。還有什麼建議？ – ixsearchwell

你不需要額外的js：'$ header.addClass（'opaque-header a'）'所有正在做的就是向''main-header'中添加一個'a'類。你只需要定位你的'＃main-header'中的鏈接元素的CSS。嘗試創建一個CSS規則，例如'.opaque-header＃et-top-navigation＃top-menu-nav＃top-nav li> a {color：black！important; }'這有點多，但應該有希望讓你在那裏。如果這沒有幫助，請將＃主標題HTML發佈到您的問題。 – disinfor

剛剛找到了一個簡單的方法來實現這一點。只需進入主題定製器 - >標題和導航 - >固定導航設置，然後將主菜單鏈接顏色設置爲希望菜單字體滾動的顏色。然後，在主題定製器 - >標題和導航 - >主菜單欄中，將文本顏色設置爲滾動前菜單文本的顏色。

它完美的作品。

來源

2017-10-06 04:07:50 ixsearchwell

如何在滾動條上更改導航欄的文字顏色？

回答

相關問題