 <p>You need to do this on a trial and error basis. And you need to change a static parent. Check this example and follow it.</p> <p><strong>Snippet</strong></p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () { $(window).scroll(function () { if ($(window).scrollTop() &gt; 125) $("body").addClass("fixed"); else $("body").removeClass("fixed"); }); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;} h1, h2 {font-weight: normal;} h1 {font-size: 1.5em;} h2 {font-size: 1.25em;} h1, h2, p {margin: 0 0 15px;} .fixed {padding-top: 42px;} .fixed .static {position: fixed; top: 0; width: 100%; background: #fff; padding-bottom: 15px;}</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt; &lt;h1&gt;Static Header Example&lt;/h1&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, cumque inventore laudantium quod, vel pariatur dolore obcaecati veniam aspernatur aliquam ad dolorum possimus illo facilis et totam nam unde, sint?&lt;/p&gt; &lt;h2 class="static"&gt;This is gonna be Static!&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis tempore praesentium eos odio nobis dignissimos labore expedita corrupti sapiente perferendis consequuntur, in, eveniet error! Officiis iste architecto eos? Deserunt, delectus!&lt;/p&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, blanditiis dolore ipsum odit sint delectus assumenda excepturi dolor rem aperiam magni eligendi quidem suscipit nam ullam porro tenetur tempora ut!&lt;/p&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis tempore praesentium eos odio nobis dignissimos labore expedita corrupti sapiente perferendis consequuntur, in, eveniet error! Officiis iste architecto eos? Deserunt, delectus!&lt;/p&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, blanditiis dolore ipsum odit sint delectus assumenda excepturi dolor rem aperiam magni eligendi quidem suscipit nam ullam porro tenetur tempora ut!&lt;/p&gt;</code></pre> </div> </div> </p>