title: Hiding the navbar on front page using jquery
body: <p>I have searched a lot on how to hide the navbar from the front page of my website(that is from the particle-js section) and display it when user interacts with other pages using jquery and it should also be responsive as well.</p>
  
  <p>I have written the code in the jquery but its not working as expected.</p>
  
  <p>HTML </p>
  
  <pre><code>  &lt;section id="particles-js"&gt;
          &lt;div class="navbar-fixed"&gt;
              &lt;nav class="black"&gt;
                  &lt;div class="nav-wrapper"&gt;
                      &lt;a href="#" class="sidenav-trigger" data-target="mobile-nav"&gt;
                          &lt;i class="material-icons"&gt;menu&lt;/i&gt;
                      &lt;/a&gt;
                          &lt;ul class=" hide-on-med-and-down"&gt;
                              &lt;li&gt;&lt;a href=#&gt;home&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=#&gt;about&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=#&gt;project&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=#&gt;contact&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
  
      &lt;/section&gt;
  </code></pre>
  
  <p>javascript code</p>
  
  <pre><code>  $(Document).ready(function(){
              var previousScroll=0;
              $(window).scroll(function(){
                  var currentScroll = $(this).scrollTop();
                  if(currentScroll&gt;0  &amp;&amp; (currentScroll&lt; ($(document).height()- $(window).height())))
                  {     
                      alert("heyy");
                      if (currentScroll &lt; $(window).height()){
                          window.setTimeout(hideNav, 300);
                      }
                      else {
                          window.setTimeout(showNav, 300);
                      }
  
                  }
                  previousScroll=currentScroll;
              });
  
  
              function hideNav() {
                  $(".black").hide();             
              }
  
              function showNav() {
                  $(".black").show();
              }
          });
  </code></pre>
  
  <p>jfiddle link : - <a href="https://jsfiddle.net/arunoday/uxnyctbr/5/" rel="nofollow noreferrer">https://jsfiddle.net/arunoday/uxnyctbr/5/</a></p>