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

时间:2016-11-10 14:34:28

标签: css wordpress bootstrap-modal

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

我想在滚动后更改粘性菜单的颜色。有人可以通过自定义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;
    }

3 个答案:

答案 0 :(得分:0)

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

你需要一个滚动监听器(如果使用jquery)

.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

{{1}}

答案 1 :(得分:0)

这是一个粗略的例子,但希望你能得到这个概念。滚动后,您可以将标题添加到标题中。

对于该类的任何样式更改,如颜色在css中定义,但您需要一些简单的JS来检测您的滚动。请看这个例子(我根据高度的变化采取自己的自由)并根据您的需求进行定制



$(function() {
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll >= 97) {
            $("header").addClass('shrink');
        } else {
            $("header").removeClass("shrink");
        }
    });
});

.container {
  height: 900px;
  overflow-y: scroll;
}

header {
  background-color: blue;
  width: 100%;
  height: 100px;
  position: fixed;
}

h1 {
  font-size: 22px;
  color: white;
}

header.shrink {
  height: 50px;
  background-color: red;
}

h1.shrink {
  font-size: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="container">
<header><h1>I'm a header</h1></header>
</body>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

只需在主题样式表的末尾添加:

def countpaths(row, column):
    result = [[1] * column for r in range(row)]
    for r in range(1, row):
        for c in range(1, column):
            result[r][c] = result[r][c-1] + result[r-1][c]
    return result

paths = countpaths(3,7)
for r in paths:
    print(r)
print(paths[0][0])
print(paths[2][6])

关于移动问题,您需要在css中搜索适当的媒体查询,并将上述内容添加到相应的块中。