title: Navbar fade In when back to top
body: <p>I was trying this jQuery example</p>
  
  <pre><code>(function ($) {
    $(document).ready(function(){
  
    // hide .navbar first
   // $(".masthead").hide();
    $(".masthead").css("background-color","inherit");
    // fade in .navbar
    $(function () {
      $(window).scroll(function () {
              // set distance user needs to scroll before we fadeIn navbar
        if ($(this).scrollTop() &gt; 600) {
          $('.masthead').fadeIn();
          $(".masthead").css("background-color","black");
        } else if($(this).scrollTop === 0){
                  $('.masthead').fadeIn();
  
        } else {
          $('.masthead').fadeOut();
        }
      });
  
  
    });
  
  });
  }(jQuery));
  </code></pre>
  
  <p>It shows the menu/navbar when I run the page and disapears when I start scrolling and after 700 pixels navbar is displayed again with black background, I expected it to fade in again after I come back to the top. </p>
  
  <pre><code>if($(this).scrollTop === 0){
      $('.masthead').fadeIn();
  }
  </code></pre>
  
  <p>But it have not worked. How do scrollTop() work then? I have also tried to set scrollTop &lt; 10, but with no success. How do I make it work when I'm back at 10 pixels or zero? </p>