Issues with a fixed header on the second slide using curtains.js
I'm using curtains.js to create a curtain/cover scroll effect. I'm
encountering problems when I place a fixed header on the second (last)
slide, where the second slide has enough content to be scrollable.
It's a bit hard to explain (I do so below), but you can see it in action
on this jsfiddle.
You can see the issues when (a) you've just transitioned from the first
slide to the second and (b) after you've past the first slide, scroll back
up until you see the top of the second slide -- the content now somehow
overlaps with the header. In fact, if (c) you scroll very quickly from the
second slide back to the first slide and then slowly scroll back to the
second, you see the header out of place (at least I understand why this
one might be happening).
Any tips on fixing these? I know curtains.js is no longer maintained --
might there be an alternative that doesn't encounter these issues? (I
couldn't find one) Is this just a problem with curtains.js that I probably
can't get around very easily?
Thanks!
Here's the relevant html; the css is mostly irrelevant (so that SO will
let me post the jsfiddle link):
<ol class="curtains">
<li id="One" class="sectionOne">
<header>
<h1>SECTION ONE HEADER</h1>
</header>
<h2>SECTION ONE CONTENT</h2>
</li>
<!-- end #sectionOne -->
<li id="Two" class="sectionTwo">
<header class='fixed'>
<h1>SECTION TWO HEADER</h1>
</header>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
<h2>SECTION ONE CONTENT</h2>
</li>
<!-- end #sectionTwo -->
</ol>
No comments:
Post a Comment