I have problem with scroll down navbar function

Question

I want to have on top of the site menu like this down here. When the user scrolls down it should change the background and show another logo.

Why does this function not work? It just shows a black background all the time. I want it to be shown while scrolled down by some px.

https://codepen.io/anon/pen/XJdVYr - i want to do this

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

Your snippet is missing a reference to jQuery.js, which is causing the problem. Is that the case in your working environment too? — Rory McCrossan, Mar 15 '19 at 16:02
@Buszek checkout my ans below and ask me if u need more help — Bathri Nathan, Mar 15 '19 at 16:47

score 0 · Answer 1 · answered Mar 15 '19 at 16:46

See this code to over come this issue. as you wish css will changed while scrolling

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

I have problem with scroll down navbar function

1 Answers1