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

【问题标题】：I have problem with scroll down navbar function我有向下滚动导航栏功能的问题
【发布时间】：2021-02-01 18:22:02
【问题描述】：

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

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

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>

【问题讨论】：

您的 sn-p 缺少对 jQuery.js 的引用，这导致了问题。你的工作环境也是这样吗？
我已将 jquery 链接到 html 的顶部
我已经为你编辑了一个问题
我的js逻辑比不上好吗？
嗯，这真的很有帮助

标签： javascript jquery html css

【解决方案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>

【讨论】：