Changing "Starting Position" of a fixed css element

Question

I'm a newbie to html and css, and I was wondering if this is possible in pure css.

So I made 3 divs, all fitted perfectly to my screen size. What I am wondering is if you make the "Menu" fixed so it scrolls along, can you change the starting position of it?

<div class="red"></div>
<div class="blue">
  <h1>Menu</h1>
</div>
<div class="green"></div>

This is the CSS that goes along with it:

.red{
  background-color: red;
  width: 100%;
  height: 1080px;
}

.blue{
  background-color: blue;
  width: 100%;
  height: 1080px;
}

.green{
  background-color: green;
  width: 100%;
  height: 1080px;
}


h1{
  font-size: 100px;
  position: fixed;
  top: 0;
}

So what I basically mean is can "Menu" be fixed from when I scroll across the blue div and downwards while it's not visible yet on the red div? (so the 'starting position' of it is actually on the blue div)

Sorry if the question is poorly explained, english is not my native language. Thank you in advance.

Answer 1

I know you mentioned you want the solution in pure css, but if you would like to use JQuery that will be a solution.

make the menu absolute:

.persist-menu
{
   position: absolute;
}

right a function to update the position of the menu

function UpdateMenuPosition() {
       var el             =  $(".blue"),
           offset         = el.offset(),
           scrollTop      = $(window).scrollTop(),
           floatingHeader = $(".persist-menu", el)

       if (scrollTop > offset.top) {
           floatingHeader.css({top:(scrollTop)});
       } else {

       };
}

and call it while scrolling

$(function() {

   $(window)
    .scroll(UpdateMenuPosition)
    .trigger("scroll");

});

Check the demo: http://jsfiddle.net/wfff74w9/4/