<section class="under">
<div class="under-inner one">
<h1 class="fixed">The Issue:</h1>
</div>
</section>
<section class="over">
<div class="over-inner centered">
<p>I needed to have each section start with a different background image, but the section title needed to be fixed position while the content scrolled over both. This wasnt difficult but the tricky part was having mulitple occurrences of pattern. The "fixed" titles would overlap and be in the incorrect sections.</p>
</div>
</section>
<section class="under">
<div class="under-inner two">
<h2 class="fixed">The Solution:</h2>
</div>
</section>
<section class="over">
<div class="over-inner centered">
<p>Using Waypoints I am hiding and showing section titles as you scroll past the titles. When the title is underneath the section, the title is moved off the screen.</p>
</div>
</section>
<section class="under">
<div class="under-inner three">
<h3 class="fixed">The End.</h3>
</div>
</section>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 100%;
color: #ddd;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased !important;
text-rendering: optimizelegibility;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3{
font-family: 'Oswald', sans-serif;
font-size: 64px;
line-height: 1.328125;
font-weight: 900;
}
body{
font-family: Georgia, serif;
font-size: 21px;
line-height: 1.57142857;
}
section{
height: 100vh;
width: 100%;
background: #222;
background-position: center;
&.over{
position: relative;
z-index: 10;
}
.over-inner{
position: relative;
}
.under-inner{
color: white;
height: 100vh;
position: relative;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.one{
background-image: url(https://unsplash.it/1200/750?image=999);
}
.two{
background-image: url(https://unsplash.it/1200/750?image=835);
}
.three{
background-image: url(https://unsplash.it/1200/750?image=1074);
}
}
.centered{
position: absolute;
top: 50%;
left: 0;
padding: 0 10%;
transform: translateY(-50%);
}
//waypoints
.fixed{
position: absolute;
top: -100%;
left: -100%;
opacity: 0;
transition: opacity 100ms linear;
z-index: 0;
margin: 0;
}
.locked{
position: fixed;
left: 10%;
top: 50%;
transform: translateY(-50%);
opacity: 1;
transition: opacity 100ms linear;
}
View Compiled
$( document ).ready(function() {
//Waypoints
$('.under-inner').each(function(){
var $this = $(this);
$this.waypoint(function(direction) {
if (direction === 'down') {
$this.children(".fixed").addClass('locked');
}else{
$this.children(".fixed").removeClass('locked');
}
}, { offset: '60%' });
});
//End Waypoints
});
This Pen doesn't use any external CSS resources.