我有向下滚动导航栏功能的问题

Question

我想在站点菜单的顶部像这样在这里。 当用户向下滚动时，它应该改变背景并显示另一个标志。

为什么这个功能不起作用？ 它只是一直显示黑色背景。 我希望它在向下滚动一些 px 时显示。

https://codepen.io/anon/pen/XJdVYr - 我想这样做

 $(document).ready(function() { $(window).scroll(function() { if ($(window).scrollTop() > 50) { $('#menu-logo').slideDown(500); } if ($(window).scrollTop() < 50) { $('#menu-logo').slideUp(500); } }); });

 .navbar { width: 950px; position: fixed; left: 0; right: 0; margin-left: auto; margin-right: auto; display: flex; } .navbar .navbar-brand { position: absolute; left: 0; } .navbar .collapse { padding-top: 40px; margin-left: 225px; } .navbar a { text-decoration: none; border-right: 1px solid rgb(153, 153, 153); font-size: 14px; font-family: 'Mada', sans-serif, Regular; color: #000000; padding: 10px 40px; } .navbar a:last-child { border-right: none; } .navbar #menu-logo { background: rgba(51, 51, 51); width: 950px; position: fixed; height: 95px; right: 0; left: 0; margin-right: auto; margin-left: auto; padding-bottom: 95px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="navbar navbar-expand-md navbar-light bg-light"> <img class="navbar-brand" id="logo" src="images/img2-logo.png" alt=""> <img id="menu-logo" src="images/img-menu.png" alt=""> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <a class="nav-item nav-link" href="#mission">MISSION</a> <a class="nav-item nav-link" href="#clients">CLIENTS</a> <a class="nav-item nav-link" href="#products">PRODUCTS</a> <a class="nav-item nav-link" href="#contact">CONTACT</a> </div> </nav>

Answer 1

请参阅此代码以解决此问题。 如您所愿，滚动时 css 会发生变化

 $(document).ready(function() { $(window).scroll(function() { if ($(window).scrollTop() > 500) { console.log($(window).scrollTop()); $('#datacss').css("background-color", "black"); } if ($(window).scrollTop() < 500) { console.log($(window).scrollTop()); $('#datacss').css("background-color", "white"); } }); });

 .too-height { min-height: 2500px; } .navbar { width: 950px; position: fixed; left: 0; right: 0; margin-left: auto; margin-right: auto; display: flex; height: 100em; } .navbar .navbar-brand { position: absolute; left: 0; } .navbar .collapse { padding-top: 40px; margin-left: 225px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="too-height" id="datacss"> <nav class="navbar navbar-expand-md navbar-light bg-light"> <img class="navbar-brand" id="logo" src="images/img2-logo.png" alt=""> <img id="menu-logo" src="images/img-menu.png" alt=""> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <a class="nav-item nav-link" href="#mission">MISSION</a> <a class="nav-item nav-link" href="#clients">CLIENTS</a> <a class="nav-item nav-link" href="#products">PRODUCTS</a> <a class="nav-item nav-link" href="#contact">CONTACT</a> </div> </nav> </div>