Navigation bar not showing when scrolling up

Question

In reference to this snippet here, I am trying to make my navigation show up at the top whenever the user scrolls up. The nav can disappear as per normal when scrolling down, but it should show up when scrolling back up.

Below is the snippet:

<script> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/core.js"</script>
<nav>
  <div class="container">
    <a href="#" id="brand">Brand</a>
    <button>
      <span></span>
      <span></span>
      <span></span>
    </button>
    
    <ul class="navbar-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">page a</a></li>
      <li><a href="#">page b</a></li>
      <li><a href="#">page c</a></li>
      <li><a href="#">page d</a></li>
    </ul>
    
  </div>
</nav>

body {
    background: #eee;
    min-height: 3000px;
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

.add_menu{
  background: red;
}

.container {
    width: 80%;
    margin: 0 auto;
    clear: both;
}

a {
    display: inline-block;
    color: #333;
    text-decoration: none;
}

nav {
    background: #fff;
    height: 80px;
    line-height: 80px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9998;
    transition: all 0.5s;
}

nav.scrollUp {
    transform: translateY(-80px);
}

nav ul.navbar-menu {
    margin: 0;
    padding: 0;
    display: inline-block;
    float: right;
}

nav ul.navbar-menu li {
    display: inline-block;
    margin: 0 10px;
}

nav ul.navbar-menu li a {
    color: #666;
    font-size: 14px;
}

nav a#brand {
    text-transform: uppercase;
    foat: left;
    font-weight: 800;
    font-size: 20px;
}

nav button {
    background: none;
    width: 30px;
    height: 40px;
    margin-top: 20px;
    border: none;
    float: right;
    display: inline-block;
    cursor: pointer;
    display: none;
}

nav button span {
    width: 30px;
    height: 40px;
    height: 2px;
    background: #333;
    display: block;
    margin: 5px 0;
}

@media (max-width: 768px) {
    nav ul.navbar-menu {
        display: none;
    }
    nav button {
        display: block;
    }
}

$(document).ready(function () {
  
   var c, currentScrollTop = 0,
       navbar = $('nav');

   $(window).scroll(function () {
      var a = $(window).scrollTop();
      var b = navbar.height();
     
      currentScrollTop = a;
     
      if (c < currentScrollTop && a > b + b) {
        navbar.addClass("scrollUp");
      } else if (c > currentScrollTop && !(a <= b)) {
        navbar.removeClass("scrollUp");
      }
      c = currentScrollTop;
  });
  
});

When I view the page via inspector, I get an uncaught reference error:

Uncaught ReferenceError: $ is not defined

However, I have jquery imported as my snippet shows.

How can I fix this?

Answer 1

I am edit you some portions of code it's fixed please check.

$(document).ready(function () {
  
   var c, currentScrollTop = 0,
       navbar = $('nav');

   $(window).scroll(function () {
      var a = $(window).scrollTop();
      var b = navbar.height();
     
      currentScrollTop = a;
     
      if (c < currentScrollTop && a > b + b) {
        navbar.addClass("scrollUp");
      } else if (c > currentScrollTop && !(a <= b)) {
        navbar.removeClass("scrollUp");
      }
      c = currentScrollTop;
  });
  
});

body {
    background: #eee;
    min-height: 3000px;
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

.add_menu{
  background: red;
}

.container {
    width: 80%;
    margin: 0 auto;
    clear: both;
}

a {
    display: inline-block;
    color: #333;
    text-decoration: none;
}

nav {
    background: #fff;
    height: 80px;
    line-height: 80px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9998;
    transition: all 0.5s;
}

nav.scrollUp {
    transform: translateY(-80px);
}

nav ul.navbar-menu {
    margin: 0;
    padding: 0;
    display: inline-block;
    float: right;
}

nav ul.navbar-menu li {
    display: inline-block;
    margin: 0 10px;
}

nav ul.navbar-menu li a {
    color: #666;
    font-size: 14px;
}

nav a#brand {
    text-transform: uppercase;
    foat: left;
    font-weight: 800;
    font-size: 20px;
}

nav button {
    background: none;
    width: 30px;
    height: 40px;
    margin-top: 20px;
    border: none;
    float: right;
    display: inline-block;
    cursor: pointer;
    display: none;
}

nav button span {
    width: 30px;
    height: 40px;
    height: 2px;
    background: #333;
    display: block;
    margin: 5px 0;
}

@media (max-width: 768px) {
    nav ul.navbar-menu {
        display: none;
    }
    nav button {
        display: block;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav>
  <div class="container">
    <a href="#" id="brand">Brand</a>
    <button>
      <span></span>
      <span></span>
      <span></span>
    </button>
    
    <ul class="navbar-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">page a</a></li>
      <li><a href="#">page b</a></li>
      <li><a href="#">page c</a></li>
      <li><a href="#">page d</a></li>
    </ul>
    
  </div>
</nav>