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

Question

我正在导航栏上。 向下滚动时，我希望它变薄。 我有代码在工作，但是我无法应用样式。.dev工具说它们正在被应用，但没有被应用。 因此，使用jquery或仅使用vanilla js，如何立即应用这些设置。 这是“应该”如何工作的屏幕截图：

• 滚动之前
• 滚动后

由于某种原因，我无法在此处发布CSS，因此这里是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

您首先需要为.main-nav-scrolled类定义属性。 像这样：

 $(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

您可以使用jquery的.scrollTop（）方法。 基本上，有两个CSS文件将根据用户是否滚动到某个位置而应用。 这是一个例子：

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

每当用户滚动大于或等于100像素时，以上代码将在标题类中添加较小的类，否则它将被删除。 然后，只要应用较小的类，就可以更改高度或隐藏一些对象。 您只需要了解基本的CSS。