title: How to make a HTML section position fixed for certain scrolling period?
body: <p>HTML structure is something like:</p>
  
  <pre><code>&lt;header&gt; ..content &lt;/header&gt;
  &lt;section class="sec-1"&gt; ..content &lt;/section&gt;
  &lt;section class="sec-2"&gt; ..content &lt;/section&gt;
  &lt;section id="sec-3"&gt;
    &lt;div class="item-1" style="opacity:1"&gt; &lt;img src="exm.jpg" alt=""&gt; &lt;/div&gt;
    &lt;div class="item-2" style="opacity:0"&gt; &lt;img src="exm.jpg" alt=""&gt; &lt;/div&gt;
    &lt;div class="item3" style="opacity:0"&gt; &lt;img src="exm.jpg" alt=""&gt; &lt;/div&gt;
  &lt;/section&gt;
  &lt;section id="sec-4"&gt; ..content &lt;/section&gt;
  &lt;section class="sec-5"&gt; ..content &lt;/section&gt;
  &lt;footer&gt; ..content &lt;/footer&gt;
  </code></pre>
  
  <p>When <code>#sec-3</code> will appear at the bottom like <a href="http://prntscr.com/c97u0z" rel="nofollow">http://prntscr.com/c97u0z</a> , then page scrolling will show <code>.item-2</code>, <code>.item-3</code> at the same place of <code>.item-1</code> inside <code>#sec-3</code>, I mean at the bottom. Then page scrolls to <code>#sec-4</code> as usual.</p>
  
  <p>I've tried this way:</p>
  
  <pre><code>function getId(element) {
    return document.getElementById(element);
  }
  
  function scroll_effect() {
    var yPosition = window.pageYOffset,
      targetPos = getId('sec4').offsetTop - screen.availHeight;
    if(yPosition &gt; targetPos) {
      $('.item-2').css('opacity', '0');
      $('.item-1').css('opacity', '1');
      $('.item-3').css('opacity', '0');
    }
    if(yPosition &gt; targetPos + getId('sec3').offsetHeight - (getId('sec3').offsetHeight / 2)) {
      $('.item-2').css('opacity', '1');
      $('.item-1').css('opacity', '0');
      $('.item-3').css('opacity', '0');
    }
    if(yPosition &gt; targetPos + getId('sec3').offsetHeight) {
      $('.item-2').css('opacity', '0');
      $('.item-1').css('opacity', '0');
      $('.item-3').css('opacity', '1');
    }
  }
  window.addEventListener("scroll", scroll_effect);
  </code></pre>
  
  <p>It made changes inner items <code>.item-1</code>, <code>.item-2</code>, <code>.item-3</code> within <code>#sec-4</code> but I can't figure out how do I stick <code>#sec4</code> on the bottom at the time of changing inner items on page scrolling. </p>
  
  <p>FYI, also reverse should happen when scrolls bottom to top maintaining same manner.</p>