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

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>