向下滚动时更改导航栏，向上滚动时再次更改

Question

我试图在用户向上或向下滚动时更改导航栏。当用户向下滚动时我能够更改导航栏但是在向上滚动时我无法将其更改回正常状态。此外，我正在尝试使用javascript来完成这项工作。以下是我到目前为止的情况：

$(document).ready(function() {
  $(document).on('scroll', function(e) {
    $(window).scroll(function() {
      if ($(window).scrollTop() > 250) {
        $('.navbar').animate({
          'opacity': '1'
        }, 'slow');
        $('a').animate({
          'opacity': '1'
        }, 'slow');
        $('img').animate({
          'left': '126px'
        }, 'slow');
        $('.get').animate({
          'opacity': '1'
        }, 'slow');
      }
    });
  });
});

    body {
      padding: 0px;
      margin: 0px;
    }
    .chapter1 {
      background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url('test2.jpg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .container {
      width: inherit;
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100vh;
    }
    .row {
      margin: 0;
    }
    .navbar {
      margin: 0px;
      padding: 10px;
      background-color: #125688;
      border: none;
      opacity: .7;
    }
    .navbar-brand > img {
      position: absolute;
      width: auto;
      top: 0;
      margin-left: -126px;
      left: 50%;
    }
    h1 {
      text-align: center;
      margin-top: 15%;
      color: white;
      font-family: Arial, Helvetica, sans-serif;
      font-style: italic;
      font-size: 40px;
      font-weight: bold;
      font-variant: small-caps;
    }
    .getStarted {
      position: absolute;
      left: 50%;
      margin-left: -88px;
      margin-top: 5%;
      background-color: #125688;
      border: 1px solid white;
      border-radius: 4px;
      font-size: 30px;
      font-weight: bold;
      font-family: Arial, Helvetica, sans-serif;
      color: white;
      opacity: .7;
    }
    .whatWeDo {
      background-color: #125688;
      color: white;
      width: 25%;
      font-size: 30px;
      font-weight: bold;
      font-family: Arial, Helvetica, sans-serif;
      text-align: right;
      padding-right: 10px;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
    }
    #inputFirstName,
    #inputLastName {
      width: 45%;
    }
    #inputFirstName {
      float: left;
    }
    #inputLastName {
      float: right;
    }
    .nav > li.dropdown.open {
      position: static;
    }
    .nav > li.dropdown.open .dropdown-menu {
      display: table;
      text-align: center;
      width: 100%;
      height: 65px;
      border-top: 2px solid white;
      background-color: #125688;
      font-size: 26px;
      border-radius: 0px;
      border-left: none;
    }
    .dropdown-menu > li {
      display: inline-block;
    }
    .dropdown-menu > li > a {
      margin-top: 5px;
      color: white;
    }
    .dropdown-menu > li > a:focus,
    .dropdown-menu > li > a:hover {
      background-color: #125688;
      color: white;
    }
    .modal-body > .row {
      padding: 2%;
      font-size: 20px;
      font-family: Arial, Helvetica, sans-serif;
      text-align: center;
    }
    .btn-default {
      position: absolute;
      left: 50%;
      margin-left: -35px;
    }
    .navbar-default .navbar-nav > li > .explore,
    .navbar-default .navbar-nav > li > .explore:focus,
    .navbar-default .navbar-nav > li > .explore:hover {
      left: 200%;
      font-size: 24px;
      color: white;
      opacity: 0;
    }
    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:focus,
    .navbar-default .navbar-nav > .open > a:hover {
      background-color: #125688;
    }
    .navbar-right {
      margin: 0;
    }
    .get {
      position: static;
      margin-right: 30px;
      margin-top: 1px;
      background-color: #FFF;
      border: none;
      border-radius: 5px;
      padding: 8px;
      font-size: 20px;
      color: #000;
      opacity: 0;
    }
    .modal-content {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -30vh;
      margin-left: -157px;
      width: 25%;
      height: 60vh;
      border: 2px solid #125688;
    }
    .modal-header {
      padding: 1px;
      text-align: center;
    }
    .close {
      font-size: 24px;
      color: #125688;
      opacity: 1;
    }

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Navigation Bar -->
<div class="row">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand">
        <img id="tholos" alt="Brand" src="TholosLogo.png">
      </a>
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle explore" data-toggle="dropdown">Explore<span class="caret"></span></a>
          <ul class="dropdown-menu list-inline" role="menu">
            <li><a href="#">News</a>
            </li>
            <li><a href="#">Blogs</a>
            </li>
            <li><a href="#">Activites</a>
            </li>
            <li><a href="#">Location</a>
            </li>
            <li><a href="#">About Us</a>
            </li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <button class="get" data-toggle="modal" data-target="#signUp">Get Started</button>
        </li>
      </ul>
    </div>
  </nav>
</div>
<div style="height:1000px;">
</div>