如何更改网站滚动的导航颜色？

Question

我正在使用Wordpress为一个新网站试镜。将主要导航移至标题图像上方，并让透明色。 将导航监视器窗口与网站内容一起使用后，我希望将其更改为黑色。为了更好地理解测试网站，请执行以下操作：http://new.blogchampz.com/

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

Answer 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;
}