如何使用jQuery应用这几个CSS设置？

Question

I am working on a navigation bar. When I scroll down, I want it to become thinner. I have the code working but I can't get the styles to apply.. The dev tools say they are being applied but they are not. So with jquery or just vanilla js, how can I apply these settings at once. Here is a screen shot of how it "should" work:

• Before scrolling
• After scrolling

for some reason I can't post the css here, so here is a link to codepen .

 $(document).ready(function() { // all custom jQuery will 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 a { height: 110px; line-height: 110px; } .fixed-nav { height: 50px; } .fixed-nav li, .fixed-nav a { height: 50px; line-height: 50px; } .menu { width: 90%; max-width: 980px; margin: 0 auto; } .menu a { 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 a { 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 only screen and (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 only screen and (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> 

Answer 1

You need to define properties for .main-nav-scrolled class first. Something like this:

 $(document).ready(function() { // all custom jQuery will 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 a { height: 110px; line-height: 110px; } .fixed-nav { height: 70px; } .fixed-nav li, .fixed-nav a { height: 50px; line-height: 50px; } .menu { width: 90%; max-width: 980px; margin: 0 auto; } .menu a { 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 a { 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> 

Answer 2

You can use jquery's .scrollTop() method. Basically, you have two css files that will get applied depending on whether the user scrolls to a certain position or not. Here's an example:

$(function() {
        $(window).scroll(function() {
            if ($(window).scrollTop() >= 100) {
                $(".header").addClass("smaller");
            } else {
                $(".header").removeClass("smaller");
            }
        });
    });

That code above will add the smaller class to the header class whenever the user scroll is greater than or equal to 100 pixels, otherwise it will be removed. Then you can just change the height or hide some objects whenever smaller class is applied. You just need to know basic css for that.