html - make fixed div collapse behind nav bar on scroll

Question

Wasn't sure how to word the title properly - basically I want to know how the fixed header div disappears behind the nav bar in this codepen.

http://codepen.io/Guilh/pen/JLKbn

Header code:

header {
height: 300px;
padding-top: 50px;
background: #f07057;
position: fixed;
width: 100%;
top: 0;
}

nav bar code:

.main-nav {
background: #fff;
height: 80px;
z-index: 150;
margin-bottom: -80px;
box-shadow: 0 2px 3px rgba(0,0,0,.4);
position:relative;
}

How is that working? In contrast, my attempt is here:

http://codepen.io/Sasoon/pen/bVNVQv

Thanks so much!

Answer 1

Cast your .filler block as relative to make it above fixed block when scrolling and add background filling.

Here is your example modified: http://codepen.io/anon/pen/YyPWpX

Answer 2

In the codepen1, they have used a script which will add a class to navigation when the page is scrolled. So the position will be fixed for the navigation once the new class is added (on scrolling down). If user scrolls page up, then the class will be removed. If you add the JavaScript that they have used, you can get the same functionality.