1

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.

Community
  • 1
  • 1
hexagonest
  • 612
  • 1
  • 10
  • 25
  • What do you mean with **But once the second div reaches the top div, have the whole page scroll.** – j_s_stack Jan 15 '15 at 03:20
  • hmm, hard to explain. So 2 divs right, first is what is highlighted in black, second is what is in red. Red will be having more than just "Test". Imagine there are multiple posts. RED would be out of the screen. Past where the user can see, and once he scrolls, the RED would move up, while the BLACK would stay still. RED scrolls up until it gets, say, 10px away from the BLACK. Once it gets there, BLACK and RED would start scrolling together. Does that make sense? – hexagonest Jan 15 '15 at 03:22
  • @DoorKnob no, it makes no sense cause you did not provided a good explanation. You should post in the future some code of what you currently have and explain what is exactly the issue with the provided code. – Roko C. Buljan Jan 15 '15 at 03:24
  • Not really to me. Becouse if the User cann't see the Content why should he start Scrolling. i mean he doesent know that there is some content – j_s_stack Jan 15 '15 at 03:24
  • What doesn't make sense about it? I have no code. I'm asking for help towards it. Of course there would be something indicating at the user to scroll down. – hexagonest Jan 15 '15 at 03:26
  • @j_s_stack must agree with you. At least OP is missing the info that there's some say 300px underneath the first block where the actual RED block can scroll-in and than activate the alltogether scrolling. Not doable without JS in any case. – Roko C. Buljan Jan 15 '15 at 03:26
  • Ok, I see Roko. So if I *were* to use Javascript, what would be the lightest way to implement this? – hexagonest Jan 15 '15 at 03:28
  • Could I get a link please? I don't know how to put it in words. Sorry. – hexagonest Jan 15 '15 at 03:29
  • This does seem possible without JS, although I'm not sure I have a complete grasp on the issue, i will give it a crack tomorrow. – karns Jan 15 '15 at 03:46
  • @DoorKnob I've simplified your question for future visitors, hope you don't mind! – Roko C. Buljan Jan 15 '15 at 05:48
  • Thanks. I hope this is a useful question for future visitors as I have *never* seen your solution ever before in web developing :) – hexagonest Jan 15 '15 at 06:12

1 Answers1

2

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.

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313