I am currently experimenting with adding a unique class to individual sections using jquery waypoints. The goal is to apply the 'fixed' class when a section reaches the top of the viewport, and then remove it for the previous section.
To maintain the height of the fixed div within the viewport, I have included a push element between each section.
The desired effect is similar to a reverse full-page curtain reveal.
For reference, you can view the implementation in this fiddle.
Markup
<section></section>
<div class="push"></div>
<section></section>
<div class="push"></div>
<section></section>
<div class="push"></div>
<section></section>
CSS
section {
height: 100vh;
z-index: 2;
}
.fixed {
position: fixed;
top:0;
width: 100%;
}
.push {
width: 100%;
height: 100vh;
position: relative;
z-index: 1;
}
Jquery
$('section').each(function(){
var sectionElement = $(this);
var inview = new Waypoint.Inview({
element: sectionElement[0],
entered: function(direction) {
if (direction === 'down') {
$('section').removeClass('fixed');
sectionElement.addClass('fixed');
sectionElement.prev().hide();
} else {
sectionElement.removeClass('fixed');
sectionElement.prev().addClass('fixed');
}
},
});
});