title: Navbar to scroll then remain fixed under a fixed header. ISSUES
body: <p>Can any one help me resolve some issues with my code? I am new at this and having some problems.</p>
  
  <p>Some issues with my initial code. Not doing what I need it to. Any help is appreciated!</p>
  
  <p><strong><em>I need this to:
  Pink menu bar to stop scrolling and become fixed at the bottom of the fixed header. The call to action should scroll up under the fixed header. Currently it is not scrolls all the way to the top under the fixed header and then bounces to the proper position. 
  It also covers should not hides the top part o f he the main content that remains on the page after becoming fixed.  There should be some initial padding like when you land on the page before scrolling.</em></strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {margin: 0; padding: 0;}
  
  a {text-decoration: none;}
  
  /* This class is added on scroll */
  .fixed {
   position: fixed; 
   top: 182px; 
   height: 70px; 
   z-index: 1;
  }
  
  body {
   color: #fff;
   font-family: Gill Sans, Verdana; 
   font-size: 18px;
   text-align: center;
  }
  
  header {
  background: blue;
  position: fixed;
  color: black;
  height: 182px;
  position: fixed;
  top: 0;
  width: 100% ;
  z-index: 1;
  }
  
  #action-call {
   color: black;
   height: 200px;
   padding-top: 200px;
   position: relative;
   width: 100%;
  }
  
  /* Navigation Settings */
  nav {
   position: relative;
   width: 100%;
   height: 70px;
   background: pink;
  }
  
  nav li {
   display: inline-block;
   padding: 24px 10px;
  }
  
  nav li a {
   color: #757575;
   text-transform: uppercase;
  }
  
  #main-content {
   color: black;
   height: auto;
   padding-top: 18px;
   position: relative;
   width: 100%;
  }
  
  footer {
   color: black;
   height: 100px;
   padding-top: 18px;
   position: relative;
   width: 100%; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en-US"&gt;
  &lt;head&gt;
  
   &lt;!-- Meta tags &amp; title /--&gt;
   &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
   &lt;meta name="robots" content="all,index,follow" /&gt;
  
   &lt;title&gt;Scroll To Top Then Fixed Navigation Effect With JQuery and CSS&lt;/title&gt;
   &lt;meta name="description" content="Create a sticky navigation bar that remains fixed to the top after scroll" /&gt;
   
   &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt; &lt;!-- Main stylesheet /--&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
   &lt;header&gt;
   &lt;h1&gt;FIXED HEADER&lt;/h1&gt;
    A fixed header with my logo &amp; stuff
   &lt;/header&gt;
  
  &lt;section id="action-call"&gt;
   &lt;h1&gt;CALL TO ACTION&lt;/h1&gt;
   &lt;p&gt;This is a  call to action and it will have some text, a big button and a huge image here!&lt;/p&gt; 
  &lt;/section&gt; 
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
     $(document).ready(function(){
      $(window).bind('scroll', function() {
      var navHeight = $( window ).height() - 70;
      if ($(window).scrollTop() &gt; navHeight) {
       $('nav').addClass('fixed');
      }
      else {
       $('nav').removeClass('fixed');
      }
    });
   });
  &lt;/script&gt;
  
  &lt;nav&gt;
   &lt;ul&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;Services&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Team&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;section id="main-content"&gt;
   &lt;h1&gt;MAIN CONTENT&lt;/h1&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt;
   &lt;p&gt;This is the main content section and there will be tons of text here and various posts and images etc.&lt;/p&gt; 
  &lt;/section&gt;
  
  &lt;footer&gt;
   &lt;h1&gt;FOOTER&lt;/h1&gt;
   &lt;p&gt;This is the footer area and not much will be in here. Just somne copyright and credit stuff&lt;/p&gt;
   &lt;p&gt;This is the footer area and not much will be in here. Just somne copyright and credit stuff&lt;/p&gt;
   &lt;p&gt;This is the footer area and not much will be in here. Just somne copyright and credit stuff&lt;/p&gt;
  &lt;/footer&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please see code I am having issues with here:
  <a href="http://codepen.io/BasicBlue/pen/KaxYNG" rel="nofollow noreferrer">http://codepen.io/BasicBlue/pen/KaxYNG</a></p>