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

问题描述 投票:-2回答:1

我希望在这里的网站菜单之上。当用户向下滚动时,它应该更改背景并显示另一个徽标。

为什么这个功能不起作用?它只是一直显示黑色背景。我想让它在被某些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>
javascript jquery html css
1个回答
0
投票

请参阅此代码以解决此问题。如你所愿,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>
© www.soinside.com 2019 - 2024. All rights reserved.