Css 滚动时更改粘性菜单的颜色

我正在编辑一个客户的网站，有一件事让我头晕目眩

我想在滚动后更改粘性菜单的颜色。有人能帮我定制css来做这些更改吗

这是我的css

/*
Theme Name: Malory
Theme URI: http://www.tommusrhodus.com
Version: 1.0.3
Description: Malory - A Multipurpose, Responsive WordPress Theme.
Author: Tom Rhodes
Author URI: http://www.tommusrhodus.com
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: white, custom-background, threaded-comments, translation-ready, custom-menu
*/

/* 

WARNING! DO NOT EDIT THIS FILE!

To make it easy to update your theme, you should not edit the styles in this file. Instead use 
the custom.css file to add your styles. You can copy a style from this file and paste it in 
custom.css and it will override the style in this file. You have been warned! :)

*/



  /*-----------------------------------------------------------------------------------*/
    /*  Visual Composer Styles
    /*-----------------------------------------------------------------------------------*/
    .vc_column_container > .vc_column-inner {
        padding-left: 0;
        padding-right: 0;
    }
    .wpb_row {
        margin-bottom: 0;
    }
    .box {
        width: 100%;
    }
    div[data-vc-parallax] .box,
    div[data-vc-parallax-image] .box {
        background: none;
    }

    /*-----------------------------------------------------------------------------------*/
    /*  Theme Styles
    /*-----------------------------------------------------------------------------------*/
    .admin-bar .navbar.fixed,
    .admin-bar .slide-nav-container header,
    .admin-bar .lg-toolbar {
        top: 32px;
    }
    p:empty {
        display: none;
    }
    .feature {
        padding-bottom: 25px;
    }
    .navbar-default .navbar-nav>.active>a, 
    .navbar-default .navbar-nav>.active>a:hover, 
    .navbar-default .navbar-nav>.active>a:focus {
        background: none;
    }
    .social.bordered .goodshare:before {
        display: none;
    }
    .social.bordered .goodshare {
        padding: 0;
    }
    .single-portfolio.admin-bar .fotorama {
        position: relative;
        top: -32px;
    }
    .admin-bar .slide-nav-wrapper {
        padding-top: 32px;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    .tiles img {
        max-width: none;
    }
    .select-wrap {
        position: relative;
    }
    .select-wrap > span {
        position: absolute;
        right: 23px;
        top: 7px;
        pointer-events: none;
    }
    footer select {
        border-color: #ccc;
    }
    footer address {
        margin-bottom: 0;
    }

    /*-----------------------------------------------------------------------------------*/
    /*  WORDPRESS DEFAULT STYLES
    /*-----------------------------------------------------------------------------------*/
    .post-content ul, .post-content ol,
    .wpb_text_column ul,
    .wpb_text_column ol {
        margin: 0 0 20px 0;
        padding: 0;
        list-style-position: inside;
    }
    .post-content ul ul, .post-content ol ol,
    .wpb_text_column ul ul, .wpb_text_column ol ol {
        margin: 0 0 0 40px;
    }
    .sticky {
    }
    .bypostauthor img.avatar {
    }
    .screen-reader-text {
    }
    select {
        max-width: 100%;
    }
    .alignleft,
    .aligncenter,
    .alignright,
    .alignnone {
        margin-bottom: 25px;
    }
    .alignnone {
        display: block;
    }
    .alignleft { 
        float: left; 
        margin: 0 30px 30px 0 !important;
    }
    .alignright { 
        float: right; 
        margin: 0 0 30px 30px !important;
    }
    .aligncenter { 
        display: block; 
        margin-right: auto; 
        margin-left: auto; 
        text-align: center; 
    }
    figure.aligncenter a {
        display: inline-block;
        overflow: hidden;
        position: relative;
    }
    .wp-caption { 
        max-width: 100%; 
        text-align: center; 
    }
    .wp-caption img {
        margin-bottom: 10px;
    }
    .gallery-caption { 
        margin: 20px 0; 
        max-width: 100%; 
        text-align: center; 
        z-index: 999; 
    }
    .wp-caption-text, 
    .gallery-caption-text { 
        margin: 6px 0; 
        font-style: italic; 
        font-size: 95%; 
        line-height: 120%; 
    }
    .aligncenter { 
        text-align: center;
    }
    table#wp-calendar {
        border: 1px solid #cccccc
    }
    table#wp-calendar>tbody>tr>td>a {
        text-decoration: underline
    }
    table#wp-calendar thead>tr>th { 
        width: 35px;
        height: 20px;
        text-align: center;
        border: 1px solid #cccccc;
    }
    table#wp-calendar tbody>tr>td {
        width: 35px;
        height: 20px;
        text-align: center;
        border: 1px solid #cccccc;
    }
    table#wp-calendar tfoot>tr>td>a, 
    tfoot>tr>td>a:link, 
    tfoot>tr>td>a:visited, 
    tfoot>tr>td>a:hover, 
    tfoot>tr>td>a:active {
        text-decoration: underline;
        height: 23px;
        margin-left: 10px;
        padding-bottom: 3px;
    }
    table#wp-calendar tfoot>tr>td#prev {
        width: 58px;
        height: 20px;
        text-align: left;
    }
    table#wp-calendar tfoot>tr>td#next {
        width: 58px;
        height: 20px;
        text-align: right;
    }
    .post-content table,
    .wpb_text_column table {
        margin-bottom: 25px;
    }
    .post-content table tr,
    .post-content table td,
    #wp-calendar table tr,
    #wp-calendar table td,
    .wpb_text_column tr,
    .wpb_text_column td {
        padding: 10px 15px;
        border: 1px solid #cccccc;
    }
    dd {
        margin-bottom: 25px;
    }
    dt {
        margin-bottom: 10px;
        font-size: 18px;
    }
    .widget_rss li {
        margin-bottom: 20px; padding-bottom: 20px;
    }
    .widget_rss li .rsswidget, .widget_rss li cite {
        font-weight: bold; display: block;
    }
    .widget_rss li .rss-date {
        display: block; margin-bottom: 10px;
    }
    .widget_rss li cite {
        margin-top: 10px;
    }
    .post-content hr,
    .wpb_text_column hr {
        clear: both;
    }
    .post-content span.pull-right,
    .post-content span.pull-left,
    .wpb_text_column span.pull-right,
    .wpb_text_column span.pull-left {
        float: right;
        display: inline-block;
        width: 300px;
        margin: 0 0 20px 20px;
        font-size: 22px;
        line-height: 30px;
    }
    .post-content span.pull-right,
    .wpb_text_column span.pull-right {
        float: right;
        margin: 0 0 20px 20px;
        text-align: right;
    }
    .post-content span.pull-left,
    .wpb_text_column span.pull-left {
        float: left;
        margin: 0 20px 20px 0;
    }
    .post-content table,
    .wpb_text_column table {
        text-align: left;
        width: 100%;
    }
    .post-content table td,
    .post-content table th,
    .wpb_text_column table td,
    .wpb_text_column table th {
        padding: 15px;
    }
    .post-content table tr:nth-child(even),
    .post-content table thead tr,
    .wpb_text_column table thead tr,
    .wpb_text_column table tr:nth-child(even) {
        background: #f5f5f5;
    }

    /*-----------------------------------------------------------------------------------*/
    /*  CONTACT FORM 7
    /*-----------------------------------------------------------------------------------*/
    div.wpcf7 .wpcf7-not-valid { 
        border: 2px solid #b54d4d
    }
    span.wpcf7-not-valid-tip { 
        display: none !important 
    }
    div.wpcf7-validation-errors,
    .highlight {
        margin: 0;
        padding: 10px;
        background-color: #fcf8e3;
        color: #c09853;
        border: 2px solid #faebcc;
    }
    div.wpcf7-validation-errors {
        margin-top: 20px;
    }
    div.wpcf7-mail-sent-ok {
        margin: 0;
        padding: 10px;
        border: 2px solid #d6e9c6;
        background-color: #dff0d8;
        color: #468847;
    }
    div.wpcf7 textarea {
        height: 110px;
    }
    div.wpcf7 input[type="submit"],
    div.wpcf7 p {
        margin-bottom: 0;
    }

---

您应该向我们提供一些代码，以便能够正确地提供帮助。。但简而言之

您需要一个滚动侦听器（如果使用jquery）

还有CSS

.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:hover, 
.navbar-default .navbar-nav>.active>a:focus {
    background:none;
}
.navbar-default .navbar-nav.redColored{
    background:#ff0000;
}

---

这是一个粗略的例子，但希望你能理解这个概念。您可以在类滚动后将其添加到标题中

对该类的任何样式更改（如颜色）都是在css中定义的，但需要一些简单的JS来检测滚动。请看这个例子（我自由选择了像高度变化这样的样式），并根据您的需要进行定制

$（函数（）{
$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动>=97）{
$（“标题”）.addClass（“收缩”）；
}否则{
$（“标题”）.removeClass（“收缩”）；
}
});
});
.container{
高度：900px；
溢出y：滚动；
}
标题{
背景颜色：蓝色；
宽度：100%；
高度：100px；
位置：固定；
}
h1{
字体大小：22px；
颜色：白色；
}
头.收缩{
高度：50px；
背景色：红色；
}
h1.收缩{
字体大小：14px；
}

我是头球手
只需在主题样式表末尾添加以下内容：

.navbar.fixed{
  background: rgba(255,255,255,0.6);
}

关于移动问题，您需要在css中搜索适当的媒体查询，并将上述内容添加到相应的块中。
感谢您的回复funkysoulzh，我使用cssKelvin我已经更新了我的答案，以反映您的css/html，但您可能理解上面代码的解决方案哦，是的，我做了更改，但没有更改。只有在我使用自定义css时才能反映更改。您是否在子主题中添加了上述内容？我使用的主题没有子主题用于此，问题是我不知道应该将哪些代码放在哪里。我是一个新手，请不要上传你的整个CSS文件；仅仅是相关的部分就可以让人们更容易地帮助你。你还可以提供一些关于你正在努力实现的目标和你迄今为止所做的尝试的更多信息吗？嗨，艾米丽，谢谢你。我对这件事还不熟悉。我正在处理一个没有子主题的wordpress主题。主题有一个粘滞的菜单，但客户的徽标与深色背景不匹配，所以我更改了菜单背景，但当我向下滚动时，菜单的背景与我设置的不同。非常感谢你，很有趣，它工作了。虽然手机上的菜单bg颜色显示深色背景和文本，但如何使其透明为白色
.navbar.fixed{
  background: rgba(255,255,255,0.6);
}