title: Sticky header in the middle
body: <p>I'm trying to make a <strong>sticky header</strong> within a <strong>mid region</strong>. It should stick to the top when the page is scrolled over the <strong><code>&lt;ul id="scroll-list"&gt;&lt;/ul&gt;</code></strong> element. But it must not stick on the top when the page is scrolled over <strong><code>&lt;div id="stop-sticky"&gt;&lt;/div&gt;</code></strong></p>
  
  <p>I have come close by following the <strong>solution of @izulito.</strong> </p>
  
  <p>But <strong>problem</strong> I've seen in this updated solution is that the header element seem to <strong>move to it's original position</strong>, which I verified by <code>console.log($('#header').offset().top);</code> , after scrolling to <strong><code>&lt;div id="stop-sticky"&gt;&lt;/div&gt;</code></strong>. It makes the header div to flash  at the transition. </p>
  
  <blockquote>
    <p><strong>I want a smooth scroll in which header should disappear and reappear along with the scroll.</strong>
    <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>$( document ).ready(function() {
   var actualPosition = $('#header').offset().top;
   $(window).scroll(function (event) {
   console.log($('#header').offset().top);
    if($(window).scrollTop() &gt; $('#stop-sticky').offset().top) {
        $('#header').addClass('nonstiky');
      } else {
            $('#header').removeClass('nonstiky');}
   });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#summary {
      width: 100%;
      height: 300px;
      background: #ccc;
    }
  
    #header {
      width: 100%;
      height: 60px;
      background: #fcc;
      position: sticky;
      top: 10px;
    }
      
      #header.nonstiky {
        position: relative
        }
  
    #scroll-list {
      height: 500px;
      background: #cc1;
    }
      #stop-sticky {
      height: 1000px;
      background: #c01;
    }</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;body&gt;
   &lt;div id="summary"&gt;Summary&lt;/div&gt;
   &lt;div id="header"&gt;Header&lt;/div&gt;
   &lt;ul id="scroll-list"&gt;&lt;/ul&gt;
          &lt;div id="stop-sticky"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  </blockquote>