javascript - How to apply these few css settings with jquery? -
i working on navigation bar. when scroll down, want become thinner. have code working can't styles apply.. dev tools being applied not. jquery or vanilla js, how can apply these settings @ once. here screen shot of how "should" work:
for reason can't post css here, here is link codepen.
$(document).ready(function() { // custom jquery go here var nav = $(".main-nav"); $(window).scroll(function(){ if( $(this).scrolltop() > 5 ){ nav.addclass("main-nav-scrolled"); }else{ nav.removeclass("main-nav-scrolled"); } }); });.fixed-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; width: 100%; height: 110px; background-color: #fff; border-bottom: solid 1px #f2f2f2; } .fixed-nav li, .fixed-nav { height: 110px; line-height: 110px; } .fixed-nav { height: 50px; } .fixed-nav li, .fixed-nav { height: 50px; line-height: 50px; } .menu { width: 90%; max-width: 980px; margin: 0 auto; } .menu { color: #333; text-transform: uppercase; } .menu a:visited { color: #333; } .menu a:hover, .menu a:target { color: #ed1c24; transition: color 0.4s; } .menu-items { display: inline-block; } .sitename { display: inline-block; margin-right: 30px; } a.sitename, a:visited.sitename { color: #e0e0e0; } .menu-items li { display: inline-block; margin-right: 10px; margin-left: 10px; } .menu-items { text-decoration: none; } .show, .hide { display: none; padding-left: 15px; background-color: transparent; background-repeat: no-repeat; background-position: center left; color: #dde1e2; } .show { background-image: url(assets/down-arrow-icon.png); } .hide { background-image: url(assets/up-arrow-icon.png); } @media screen , (max-width: 800px) { .menu { position: relative; width: 100%; } .sitename { position: absolute; top: 0; left: 15px; margin-left: 0px; } .menu-items { display: none; width: 100%; margin-top: 50px; background-color: #fff; } .menu-items li { display: block; text-align: center; } .show, .hide { position: absolute; top: 0; right: 15px; } .show { display: inline-block; } .hide { display: none; } #menu:target .show { display: none; } #menu:target .hide, #menu:target .menu-items { display: inline-block; } } @media screen , (max-width: 220px) { .sitename, .show, .hide { font-size: 14px; } }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <nav> <div class="container"> <div class="row"> <div class="twelve columns main-nav fixed-nav"> <div class="menu" id="menu"><a class="sitename" href="#">brand-logo</a> <a class="show" href="#menu">menu</a><a class="hide" href="#hidemenu">menu</a> <ul class="menu-items"> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">services</a></li> <li><a href="#">work</a></li> <li><a href="#">blog</a></li> <li><a href="#">empty</a></li> <li><a href="#">contact us</a></li> </ul> </div> </div> </div> </div> </nav> </header>
you need define properties .main-nav-scrolled class first. this:
$(document).ready(function() { // custom jquery go here var nav = $(".main-nav"); $(window).scroll(function() { if ($(this).scrolltop() > 5) { nav.addclass("main-nav-scrolled"); } else { nav.removeclass("main-nav-scrolled"); } }); });.fixed-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; width: 100%; height: 110px; background-color: #fff; border-bottom: solid 1px #f2f2f2; } .fixed-nav li, .fixed-nav { height: 110px; line-height: 110px; } .fixed-nav { height: 70px; } .fixed-nav li, .fixed-nav { height: 50px; line-height: 50px; } .menu { width: 90%; max-width: 980px; margin: 0 auto; } .menu { color: #333; text-transform: uppercase; } .menu a:visited { color: #333; } .menu a:hover, .menu a:target { color: #ed1c24; transition: color 0.4s; } .menu-items { display: inline-block; } .sitename { display: inline-block; margin-right: 30px; } a.sitename, a:visited.sitename { color: #e0e0e0; } .menu-items li { display: inline-block; margin-right: 10px; margin-left: 10px; } .menu-items { text-decoration: none; } .show, .hide { display: none; padding-left: 15px; background-color: transparent; background-repeat: no-repeat; background-position: center left; color: #dde1e2; } .show { background-image: url(assets/down-arrow-icon.png); } .hide { background-image: url(assets/up-arrow-icon.png); } .main-nav-scrolled { height: 45px; } .main-nav-scrolled .menu-items { margin-top: 0px; margin-bottom: 4px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <nav> <div class="container"> <div class="row"> <div class="twelve columns main-nav fixed-nav"> <div class="menu" id="menu"><a class="sitename" href="#">brand-logo</a> <a class="show" href="#menu">menu</a><a class="hide" href="#hidemenu">menu</a> <ul class="menu-items"> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">services</a></li> </ul> </div> </div> </div> </div> </nav> </header> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br>somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br> somestuff goes here<br>
Comments
Post a Comment