CODEWITHSUNDEEP
javascripthtmlcss
hexagonest
hexagonest

Reputation: 632

Make fixed top element scroll with page (once the content reaches it)

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.

Visual Representation

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

Upvotes: 1

Views: 141

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206618

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.

Upvotes: 2

Related Questions