title: jquery fixed header doesn't work properly
body: <p>If content is long, I mean if height of body is noticeably lengthy, if there is more scrollable part, fixed header works well. </p>
  
  <p>But if scrollable part is minimal,  the stage where body header and footer can be seen at once almost, then if it is scrolled to view last element of body, then fixed header starts to shake, in spite of forceful scrolling, fixed header remaining shaking, but If content is added and increases height, again it works well. </p>
  
  <p>Actually where is problem, in <code>js code</code> or <code>css class structure</code>. I've added example here, but following example will not show problem for all devices, because according to device height, it will act differently.  </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-js lang-js prettyprint-override"><code>var navpos = $('nav').offset();
  console.log(navpos.top);
  $(window).bind('scroll', function() {
    if ($(window).scrollTop() &gt; navpos.top) {
      $('nav').addClass('navfixed');
    } else {
      $('nav').removeClass('navfixed');
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>nav {
    float: left;
    width: 100%;
    background: #0E539A;
  }
  
  nav ul li {
    position: relative;
    display: inline-block;
  }
  
  nav ul li a {
    padding: 10px 15px;
    display: block;
    color: #e7e7e7;
  }
  
  .navfixed {
    top: 0;
    left: 0;
    position: fixed;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="class.php"&gt;Class&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="submanage.php"&gt;Class-Subject&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;div&gt;
    Hello&lt;br/&gt; Hello
    &lt;br/&gt; Hello
    &lt;br/&gt; Hello
    &lt;br/&gt; Hello
    &lt;br/&gt; End
    &lt;br/&gt; This content will not be shown, because it is near to end&lt;br/&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>