CODEWITHSUNDEEP
htmlcssscrollpositionfixed
user3315570
user3315570

Reputation: 101

make fixed div collapse behind nav bar on scroll

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!

Upvotes: 0

Views: 225

Answers (2)

Som
Som

Reputation: 270

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.

Upvotes: 0

Elias
Elias

Reputation: 95

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

Upvotes: 1

Related Questions