title: Get the height of the header and show top navigation when scrolled beyond the header
body: <p>Currently, I have this script. The value of 700 is placed after trial and error.</p>
  
  <pre><code>$(window).scroll(function () {
      if ($(window).scrollTop() &gt; 700) { 
          $('#top_nav').slideDown("slow");
      }
      else{
          $('#top_nav').slideUp("fast");
      }
  });
  </code></pre>
  
  <p>And I have my top navigation which is fixed with display set to none.</p>
  
  <pre><code>div#top_nav {
      width: 100%;
      z-index: 999;
      opacity: 0.9;
      border-bottom: 1px solid rgb(204, 204, 204);
      box-shadow: 0 0 7px rgb(136, 136, 136);
      position: fixed;
      background-color: rgb(255, 255, 255);
      display: none;
  }
  </code></pre>
  
  <p>My header has the following styles.</p>
  
  <pre><code>#index header {
      background-attachment: fixed;
      background-image: url("../images/bg.jpg");
      background-position: center top;
      background-repeat: no-repeat;
      background-size: cover;
  }
  </code></pre>
  
  <p>Straight away, I can see the problem. I have to adjust the value of 700 manually as the height of my header may change.</p>
  
  <p>My question is how would I go about changing the script so that it gets the height of the header including, maybe, margin and padding so that when I scroll, my top navigation slides down and shows.</p>
  
  <p>Currently it is working perfectly. The only problem is the fixed value of 700. There has to a more variable way type of doing this.</p>