Skip to content

Commit

Permalink
Adds container based sticky (fixes broken tests). Much better demos.
Browse files Browse the repository at this point in the history
  • Loading branch information
@zachleat
zachleat committed Nov 19, 2013
1 parent c61798c commit 576799f
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 31 deletions.
36 changes: 27 additions & 9 deletions demos/demo-control.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
/* Demo CSS */
body { font-family: sans-serif; color: #444; margin: 0 auto; padding: 50px 20px; max-width: 600px; }
.top,
.bottom { background: #000; color: #fff; text-align: center; border: solid black; border-width: 1px 0; padding: 1em; width: 100%; max-width: 600px; box-sizing: -webkit-border-box; box-sizing: -moz-border-box; box-sizing: border-box; }
.bottom { text-align: center; border: solid black; border-width: 1px 0; padding: 1em; width: 100%; max-width: 600px; box-sizing: -webkit-border-box; box-sizing: -moz-border-box; box-sizing: border-box; }

/* Fixed-Sticky CSS */
.top,
Expand All @@ -23,15 +23,27 @@
top: 0;
}
.bottom {
bottom: 1em;
bottom: 0;
}
#top-a {
background-color: rgba(255,0,0,.6);
top: 1em;
}
#top-b {
#bottom-b {
bottom: 1em;
}

/* Demo Colors */
#top-a,
#bottom-a {
background-color: rgba(255,0,0,.6);
}
#top-b,
#bottom-b {
background-color: rgba(0,255,0,.6);
}
.container {
background-color: #999;
}
</style>
</head>
<body>
Expand All @@ -40,16 +52,16 @@ <h1>Fixed-sticky</h1>

<p>A test page for the <a href="https://github.com/filamentgroup/fixed-sticky">Fixed-sticky project</a></p>

<div style="height: 600px">
<div class="container" style="height: 600px; padding-top: 100px;">
<div class="top fixedsticky" id="top-a">
Fixed to viewport top A, when supported.
Fixed to viewport top A.
</div>
</div>

<p>This test page includes a test to qualify the application of CSS <code>position:sticky</code>, which enjoys limited browser support. It works with the <a href="https://github.com/filamentgroup/fixed-fixed">Fixed-fixed project</a> (as of v0.1.2 of fixed-fixed).</p>

<div class="top fixedsticky" id="top-b">
Fixed to viewport top B, when supported.
Fixed to viewport top B.
</div>

<p>And now, some fake content to allow scrolling...</p>
Expand Down Expand Up @@ -92,8 +104,14 @@ <h2>Header Level 2</h2>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<div class="bottom fixedsticky">
Fixed to viewport bottom (1em above), when supported.
<div id="bottom-b" class="bottom fixedsticky">
Fixed to viewport bottom B (1em above).
</div>
<div class="container">
<div style="height: 600px"></div>
<div id="bottom-a" class="bottom fixedsticky">
Fixed to viewport bottom A.
</div>
</div>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
Expand Down
49 changes: 37 additions & 12 deletions demos/demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,43 @@
<style>
/* Demo CSS */
body { font-family: sans-serif; color: #444; margin: 0 auto; padding: 50px 20px; max-width: 600px; }

.top,
.bottom { background: #000; color: #fff; text-align: center; border: solid black; border-width: 1px 0; padding: 1em; width: 100%; max-width: 600px; box-sizing: -webkit-border-box; box-sizing: -moz-border-box; box-sizing: border-box; }
.bottom { text-align: center; border: solid black; border-width: 1px 0; padding: 1em; width: 100%; max-width: 600px; box-sizing: -webkit-border-box; box-sizing: -moz-border-box; box-sizing: border-box; }

/* Fixed-Sticky CSS */
.top,
.bottom {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
}
.top {
top: 0;
}
.bottom {
bottom: 1em;
bottom: 0;
}
#top-a {
background-color: rgba(255,0,0,.6);
top: 1em;
}
#top-b {
#bottom-b {
bottom: 1em;
}

/* Demo Colors */
#top-a,
#bottom-a {
background-color: rgba(255,0,0,.6);
}
#top-b,
#bottom-b {
background-color: rgba(0,255,0,.6);
}
.container {
background-color: #999;
}
</style>
</head>
<body>
Expand All @@ -34,16 +53,16 @@ <h1>Fixed-sticky</h1>

<p>A test page for the <a href="https://github.com/filamentgroup/fixed-sticky">Fixed-sticky project</a></p>

<div style="height: 600px">
<div class="container" style="height: 600px; padding-top: 100px;">
<div class="top fixedsticky" id="top-a">
Fixed to viewport top A, when supported.
Fixed to viewport top A.
</div>
</div>

<p>This test page includes a test to qualify the application of CSS <code>position:sticky</code>, which enjoys limited browser support. It works with the <a href="https://github.com/filamentgroup/fixed-fixed">Fixed-fixed project</a> (as of v0.1.2 of fixed-fixed).</p>

<div class="top fixedsticky" id="top-b">
Fixed to viewport top B, when supported.
Fixed to viewport top B.
</div>

<p>And now, some fake content to allow scrolling...</p>
Expand Down Expand Up @@ -86,8 +105,14 @@ <h2>Header Level 2</h2>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<div class="bottom fixedsticky">
Fixed to viewport bottom (1em above), when supported.
<div id="bottom-b" class="bottom fixedsticky">
Fixed to viewport bottom B (1em above).
</div>
<div class="container">
<div style="height: 600px"></div>
<div id="bottom-a" class="bottom fixedsticky">
Fixed to viewport bottom A.
</div>
</div>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
Expand Down Expand Up @@ -173,8 +198,8 @@ <h3>Header Level 3</h3>
<h2>Header Level 2</h2>

<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<script src="../bower_components/jquery/jquery.js"></script>
Expand Down
27 changes: 22 additions & 5 deletions fixedsticky.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,10 @@
position = $el.data( S.keys.position ),
skipSettingToFixed,
elTop,
elBottom;
elBottom,
$parent = $el.parent(),
parentOffset = $parent.offset().top,
parentHeight = $parent.outerHeight();

if( !initialOffset ) {
initialOffset = $el.offset().top;
Expand Down Expand Up @@ -84,12 +87,26 @@
$el.data( S.keys.position, position );
}

elTop = parseInt( $( el ).css( 'top' ), 10 ) || 0;
elBottom = parseInt( $( el ).css( 'bottom' ), 10 ) || 0;
function isFixedToTop() {
var offsetTop = scroll + elTop;

if( position.top && initialOffset < ( scroll + elTop ) ||
position.bottom && initialOffset > scroll + viewportHeight - ( height || 0 ) - elBottom ) {
// Initial Offset Top
return initialOffset < offsetTop &&
// Container Bottom
offsetTop + height <= parentOffset + parentHeight;
}

function isFixedToBottom() {
// Initial Offset Top + Height
return initialOffset + ( height || 0 ) > scroll + viewportHeight - elBottom &&
// Container Top
scroll + viewportHeight - elBottom >= parentOffset + ( height || 0 );
}

elTop = parseInt( $el.css( 'top' ), 10 ) || 0;
elBottom = parseInt( $el.css( 'bottom' ), 10 ) || 0;

if( position.top && isFixedToTop() || position.bottom && isFixedToBottom() ) {
if( !isAlreadyOn ) {
toggle( true );
}
Expand Down
29 changes: 24 additions & 5 deletions test/fixed-sticky-tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
$( '#qunit-fixture' ).html(
['<style>#sticky { top: 0; }</style>',
'<div id="sticky" class="fixedsticky">Sticky</div>',
'<div style="width: 100%; height: 2000px">Test</div>'].join( '' ) );
'<div style="height: 2000px">Test</div>'].join( '' ) );

var $sticky = $( '#sticky' );
$sticky.fixedsticky();
Expand All @@ -51,7 +51,7 @@
test( 'Standard Bottom', function() {
$( '#qunit-fixture' ).html(
['<style>#sticky { bottom: 0; }</style>',
'<div style="width: 100%; height: 2000px">Test</div>',
'<div style="height: 2000px">Test</div>',
'<div id="sticky" class="fixedsticky">Sticky</div>'].join( '' ) );

var $sticky = $( '#sticky' );
Expand All @@ -63,11 +63,11 @@
equal( Math.round( $sticky.offset().top ), 1000 + $( window ).height() - $sticky.height() );
});

test( 'Constrainted to parent (feature not yet implemented)', function() {
test( 'Top constrainted to parent bottom', function() {
$( '#qunit-fixture' ).html(
['<style>#sticky { top: 0; }</style>',
'<div style="width: 100%; height: 1000px"><div id="sticky" class="fixedsticky">Sticky</div></div>',
'<div style="width: 100%; height: 2000px">Test</div>'].join( '' ) );
'<div style="height: 1000px"><div id="sticky" class="fixedsticky">Sticky</div></div>',
'<div style="height: 2000px">Test</div>'].join( '' ) );

var $sticky = $( '#sticky' );
$sticky.fixedsticky();
Expand All @@ -77,7 +77,26 @@
equal( $sticky.css( 'position' ), 'fixed' );
equal( $sticky.offset().top, 1000 );
$(window).scrollTop( 2000 ).trigger( 'scroll' );
equal( $sticky.css( 'position' ), 'static' );
});

test( 'Bottom constrainted to parent top', function() {
$( '#qunit-fixture' ).html(
['<style>#sticky { bottom: 0; }</style>',
'<div style="height: 2000px">Test</div>',
'<div><div style="height: 2000px"></div><div id="sticky" class="fixedsticky">Sticky</div></div>'].join( '' ) );

var $sticky = $( '#sticky' );
$sticky.fixedsticky();

ok( $sticky.hasClass( 'fixedsticky' ) );

$(window).scrollTop( 3000 ).trigger( 'scroll' );
equal( $sticky.css( 'position' ), 'fixed' );
equal( Math.round( $sticky.offset().top ), 3000 + $( window ).height() - $sticky.height() );

$(window).scrollTop( 1000 ).trigger( 'scroll' );
equal( $sticky.css( 'position' ), 'static' );
});

test( 'Cleanup', function() {
Expand Down

0 comments on commit 576799f

Please sign in to comment.