css - Change color of sticky menu when scrolled -
am editing client's website , 1 thing has got head spinning.
i change color of sticky menu once scrolled. can me custom css make changes?
here css
/* theme name: malory theme uri: http://www.tommusrhodus.com version: 1.0.3 description: malory - 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! not edit file! make easy update theme, should not edit styles in file. instead use custom.css file add styles. can copy style file , paste in custom.css , override style in file. 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 { 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; }
this rough example concept. can class header once has scrolled.
any styling changes class color defined in css need simple js detect scrolling. please see example (i took own liberties styling height changing) , customize needs
$(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 header</h1></header> </body>
Comments
Post a Comment