skrollr classic example footer - html

Question

I am trying to teach myself to use the Skrollr plugin properly, I am mainly interested in the classic example listed in the documentation. (http://prinzhorn.github.io/skrollr/examples/classic.html).
My problem is that my footer doesn't appear at the bottom of the page, instead it appears below the first image in my Skrollr gallery. I want to keep the footer separate from #skrollr-body as this gallery would only appears on a specific page.
This is my code, it's essentially a slightly simplified version of the example.
html:
<div
class="parallax-image-wrapper parallax-image-wrapper-100"
data-anchor-target="#dragons + .gap"
data-bottom-top="transform:translate3d(0px, 200%, 0px)"
data-top-bottom="transform:translate3d(0px, 0%, 0px)">
<div
class="parallax-image parallax-image-100"
style="background-image:url(/assets/img/rocks.jpg)"
data-anchor-target="#dragons + .gap"
data-bottom-top="transform: translate3d(0px, -50%, 0px);"
data-top-bottom="transform: translate3d(0px, 50%, 0px);">
</div>
</div>
<div
class="parallax-image-wrapper parallax-image-wrapper-100"
data-anchor-target="#bacons + .gap"
data-bottom-top="transform:translate3d(0px, 200%, 0px)"
data-top-bottom="transform:translate3d(0px, 0%, 0px)">
<div
class="parallax-image parallax-image-100"
style="background-image:url(/assets/img/tiles.jpg)"
data-anchor-target="#bacons + .gap"
data-bottom-top="transform: translate3d(0px, -50%, 0px);"
data-top-bottom="transform: translate3d(0px, 50%, 0px);">
</div>
</div>
<div
class="parallax-image-wrapper parallax-image-wrapper-100"
data-anchor-target="#kittens + .gap"
data-bottom-top="transform:translate3d(0px, 200%, 0px)"
data-top-bottom="transform:translate3d(0px, 0%, 0px)">
<div
class="parallax-image parallax-image-100"
style="background-image:url(/assets/img/sky.jpg)"
data-anchor-target="#kittens + .gap"
data-bottom-top="transform: translate3d(0px, -50%, 0px);"
data-top-bottom="transform: translate3d(0px, 50%, 0px);">
</div>
</div>
<div id="skrollr-body">
<div id="dragons"></div>
<div class="gap gap-100"></div>
<div id="bacons"></div>
<div class="gap gap-100"></div>
<div id="kittens"></div>
<div class="gap gap-100"></div>
</div>
<div id="footer">
some footer stuff
</div>
and css:
* {
padding:0;
margin:0;
}
html, body {
height:100%;
}
#content {
height:100%;
position: relative;
}
.skrollr-desktop body {
height:100% !important;
}
.parallax-image-wrapper {
position:fixed;
left:0;
width:100%;
overflow:hidden;
}
.parallax-image-wrapper-50 {
height:50%;
top:-50%;
}
.parallax-image-wrapper-100 {
height:100%;
top:-100%;
}
.parallax-image {
display:none;
position:absolute;
bottom:0;
left:0;
width:100%;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
.parallax-image-50 {
height:200%;
top:-50%;
}
.parallax-image-100 {
height:100%;
top:0;
}
.parallax-image.skrollable-between {
display:block;
}
.no-skrollr .parallax-image-wrapper {
display:none !important;
}
#skrollr-body {
height:100%;
overflow:visible;
position:relative;
}
.gap {
background:transparent center no-repeat;
background-size:cover;
}
.skrollr .gap {
background:transparent !important;
}
.gap-50 {
height:50%;
}
.gap-100 {
height:100%;
}
#footer {
clear: both;
height: 100px;
background-color: red;
}

Answer 1

Put the footer element inside #skrollr-body. To make everything work on desktop/mobile, the only body content that will reside outside of #skrollr-body are your fixed position controls and attributes for the parallax-image-wrapper & parallax-image sets.
If you require additional "fixed" positioned elements in your layout, you'll need to list those outside #skrollr-body setting a data-anchor-target attribute for the div, and then call that target #id you created down in the #skrollr-body wherever you need it to display.
Like how they do with #dragons, #bacons, & #kittens targets in the classic example docs.