使固定的顶部元素随页面滚动（一旦内容到达页面）

Question

All the page content ( red "Test" in my image) should be placed at top 100% (one should start scroll to see it)

The top Header (Marked with black in my image) should be fixed to the page top.
once the Content hits the header it should start scroll with the rest of the content.

(I have no clue where to start with this problem... Can it be done without JavaScript ?)
Thanks in advance for your help everyone.

Answer 1

I've come up with a nice trick with a couple of JS lines :

jsBin live demo

var heaF = document.getElementById("headerFixed");
var heaC = document.getElementById("headerClone");

heaC.innerHTML = heaF.innerHTML;            // Clone header content (SEO wise)

function hero(){
  var t = heaC.getBoundingClientRect().top; // Keep track of the clone top pos.
  heaF.style.opacity = t<0 ? 0 : 1;         // Toggle Org header opacity
  heaC.style.opacity = t<0 ? 1 : 0;         // Toggle Clone header opacity
}

hero();                 // Do it when DOM is read
window.onscroll = hero; // Do it on scroll
window.onresize = hero; // But also on rresize

The logic:

      +--  +----------------+-- (Viewport Top)
      |    |   headerFixed  |   opacity:1; 0 when the Clone hits Viewp.Top
      h    +----------------+
      e    |                |
      r    |                |
      o    +----------------+
      |    #   headerClone  |   opacity:0; 1 when it hits Viewp.Top
      +--  +----------------+-- (Viewport Bottom)
           |   Content...   |   
           ⋮                 ⋮         

HTML:

<div id="hero">
    <div id="headerFixed"><h1>Header</h1></div>
    <div id="headerClone"></div>
</div>
<div id="content">Website template and content here</div>

CSS:

html, body { height:100%; }
#hero{              // This guy contains header and the JS cloned header
    height:100%;       // In order to cover the whole viewport height
}
#headerFixed {
    position: fixed;   // Will be always fixed!
    width: 100%;
}
#headerClone{         
    position:absolute; 
    bottom:0;          // Place it at the bottom
    opacity:0;         // (Uncomment this line to see it in action)
    width:100%;
}

_{Tip: if the above is not clear, add different background-color to all our elements. You should better see what happens.}