如何更改导航颜色以在网站上滚动？

Posted 2023-04-13

【中文标题】如何更改导航颜色以在网站上滚动？

【英文标题】：How to change color of navigation for scrolling on the site?

【发布时间】：2014-07-17 00:42:03

【问题描述】：

我正在使用 Wordpress 试镜一个新网站。将主导航移到标题图像上方，并让透明颜色。 在浏览器窗口显示网站内容后，我希望它变为黑色。为了更好地理解测试站点是这样的：http://new.blogchampz.com/

我该怎么做？我知道这包括 CSS 和 JS ...

【参考方案1】：

您需要做的就是跟踪滚动位置。一旦标题从视口中隐藏，您必须为标题菜单添加一个额外的类，背景颜色为黑色。

CSS：

.darkMenu 
    background-color: #000;

JS：

$(window).scroll(function()
    var headerHeight = HEIGHT OF HEADER;
    if($(document).scrollTop() > headerHeight)
        $('MENU SELECTOR').addClass('darkMenu');
    
    else
        $('MENU SELECTOR').removeClass('darkMenu');
    
);

更新

在您的样式表中添加以下 css，

CSS：

.masthead-fixed .site-header 
    background-color: #000 !important;

【讨论】：

对不起，我是个小外行。在wordpress中，你知道我在哪个文档中插入了JS吗？以前在“custom-header”中做了同样的过程，但没有奏效。

为所有自定义脚本包含一个单独的 JS 文件，将其包含在主题的页脚中。

我没有。你能一步一步解释吗？

检查更新的答案。当我使用 chrome 检查工具在您的网站中应用这种样式时，这很有效。