title: Fixed position navbar slideUp slideDown function breaks after scrolling down
body: <p>I recently implemented a position fixed navbar on my website which is accessed by clicking the menu button in the top left corner of the site. It works fine at the top of the page, but after scrolling up or down, the slideUp / slideDown function glitches. It works well in Safari and on the Chrome browser on my phone, but breaks in Firefox and Chrome on a desktop.</p>
  
  <p>The site is at: <a href="http://zackfischmann.com" rel="nofollow">http://zackfischmann.com</a></p>
  
  <p>All of the code can be found at <a href="https://github.com/zfisch/zfisch.github.io" rel="nofollow">https://github.com/zfisch/zfisch.github.io</a>, but I included the most relevant code below as well.</p>
  
  <p>JS:</p>
  
  <pre><code>$('#menu').click(function(){
      var nav = $('#navbar').css("display");
      var item = $('#navbar').css("display");
      if (nav == 'none') {        
          $("#navbar").slideDown();
          }
      else {
          $("#navbar").slideUp();
      }
      if (item == 'none') {
          $("#navbar-items").slideDown();
      }
      else {
          $("#navbar-items").slideUp();
      }});
  </code></pre>
  
  <p>HTML for the navbar:</p>
  
  <pre><code>&lt;div id="menu"&gt;
          &lt;a href="#menu"&gt;
              &lt;img src="img/menu.svg" alt="" height="40px" width="40px"&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="navbar"&gt;  
          &lt;div class="row" id="navbar-items"&gt;
              &lt;div class="navbar-link col-xs-3"&gt;
                  &lt;a class="scroll" href="#Home"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="navbar-link col-xs-3"&gt;
                  &lt;a class="scroll" href="#About"&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="navbar-link col-xs-3"&gt;
                  &lt;a class="scroll" href="#Projects"&gt;&lt;span&gt;Projects&lt;/span&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="navbar-link col-xs-3"&gt;
                  &lt;a class="scroll" href="#Contact"&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#menu {
  float: left;
  z-index: 1900000;
  position: fixed;
  }
  
  #navbar {
  height: 40px;
  width: 100%;
  opacity: 0.6;
  background-color: black;
  position: fixed;
  z-index: 10;
  display:none;
  }
  
  .navbar-link {
  font-size: 1.5em;
  list-style-type: none;
  color: #fff;
  font-weight: 300;
  display: inline-block;
  text-align: center;
  margin-top: 5px
  }
  
  #navbar-items {
  display: none;
  text-align: center
  }
  
  #navbar-items a:link {
  text-decoration:none;
  color: #fff;
  }
  
  #navbar-items a:visited {
  text-decoration:none;
  color: #fff;
  }
  
  #navbar-items a:hover {
  text-decoration:underline;
  color: #fff;
  }
  
  #navbar-items a:active {
  text-decoration:none;
  color: #fff;
  }
  </code></pre>
  
  <p>Any suggestions are greatly appreciated!!</p>
  
  <hr>
  
  <h1>Update</h1>
  
  <p>I decided to remove the navbar for aesthetic reasons, but am leaving this question up in case it's relevant for future builders.</p>