title: How to create a dynamic navigation bar which follows you when you reach certain location
body: <p>I want to create a navigation bar similar to this site's:</p>
  
  <p><a href="http://www.mysupermarket.co.uk/#/shelves/top_offers_in_asda.html" rel="nofollow">http://www.mysupermarket.co.uk/#/shelves/top_offers_in_asda.html</a></p>
  
  <p>Can anyone tell me how to create that navigation bar, which follows you as you scroll the page down, but not following you at the initial loading of page? </p>
  
  <p>When you access to the <a href="http://www.mysupermarket.co.uk/#/shelves/top_offers_in_asda.html" rel="nofollow">given website</a>, try to scrolling down and you will understand what I am talking about. The navigation bar that consists of MY SHOP, OFFERS, IDEAS &amp; LIFESTYLE, BAKERY and so-on...</p>
  
  <p>I have really no idea what it's called. At least tell me what it's called, so I'll be able to search.</p>
  
  <p><em><strong>Here is the solution I've done</em></strong></p>
  
  <pre><code>window.onscroll = function(){
      if(getScrollTop()&gt;140) {
          document.getElementById("menu").style.position="fixed";
      } else {
          document.getElementById("menu").style.position="";
      }
  }
  
  function getScrollTop() {
      if (window.onscroll) {
          // Most browsers
          return window.pageYOffset;
      }
  
      var d = document.documentElement;
      if (d.clientHeight) {
          // IE in standards mode
          return d.scrollTop;
      }
  
      // IE in quirks mode
      return document.body.scrollTop;
  }
  </code></pre>