Skip to content

Commit 4101bec

Browse files
zachleatzachleat
committed
Initial commit.
1 parent 635ef50 commit 4101bec

22 files changed

+11050
-3
lines changed

‎README.md

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,34 @@
1-
fixed-sticky
2-
============
1+
# Fixed-sticky: a CSS `position:sticky` polyfill
32

4-
A position: sticky polyfill with a safer position: fixed fallback.
3+
- (c)2013 @zachleat, Filament Group
4+
- MIT license
5+
6+
## Explanation
7+
8+
CSS position:sticky is really in its infancy in terms of browser support. In stock browsers, it is currently only available in iOS 6. In Chrome you can enable it by navigating to `chrome://flags` and enabling experimental “WebKit features” or “Web Platform features” (Canary).
9+
10+
## Usage
11+
12+
Just qualify element you’d like to be `position:sticky` with a `fixedsticky` class and add your own CSS to position the element.
13+
14+
.fixedsticky { top: 0; }
15+
16+
See [`demo.html`](http://filamentgroup.github.com/fixed-sticky/demo.html) for an example.
17+
18+
## Installation
19+
20+
Use the provided `fixedsticky.js` and `fixedsticky.css` files.
21+
22+
### Also available in [Bower](http://bower.io/)
23+
24+
bower install filament-sticky
25+
26+
## TODO
27+
28+
* Add support for container-based position: sticky. Only constrains to the document right now.
29+
* Add support for `bottom` positioning. Supports only top right now.
30+
* Tests (of course). I have a serious case of developer guilt releasing this without tests.
31+
32+
## Release History
33+
34+
* `v0.1.0`: Initial release.

‎bower.json

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "filament-sticky",
3+
"version": "0.1.0",
4+
"main": ["fixedsticky.js", "fixedsticky.css"],
5+
"ignore": [
6+
"**/.*"
7+
],
8+
"dependencies": {
9+
"jquery": ">=1.9.1 <2.0.0",
10+
"filament-fixed": ">=0.1.1"
11+
}
12+
}

‎bower_components/filament-fixed/.bower.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "filament-fixed",
3+
"version": "0.1.2",
4+
"main": [
5+
"fixedfixed.js"
6+
],
7+
"ignore": [
8+
"**/.*"
9+
],
10+
"dependencies": {},
11+
"homepage": "https://github.com/filamentgroup/fixed-fixed",
12+
"_release": "0.1.2",
13+
"_resolution": {
14+
"type": "version",
15+
"tag": "v0.1.2",
16+
"commit": "12760b2e3225238a2508e2f8b4d3ec89afe1f689"
17+
},
18+
"_source": "git://github.com/filamentgroup/fixed-fixed.git",
19+
"_target": ">=0.1.1",
20+
"_originalSource": "filament-fixed"
21+
}

‎bower_components/filament-fixed/README.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Fixed-fixed: a CSS `position:fixed` qualifier
2+
3+
- (c)2012 @scottjehl, Filament Group
4+
- Dual license: MIT and/or GPLv2
5+
6+
## Explanation
7+
8+
CSS fixed-positioning varies widely in browser support, and it's difficult to test. This repo includes a test that attempts to qualify the application of CSS <code>position:fixed</code>. Rather than testing immediately, it waits for the user to scroll, at which point it checks to see if fixed positioning is working properly. Prior to scroll, the script assumes fixed-positioning works, adding a class of `fixed-supported` that can be used to qualify any `position:fixed` CSS rules. When fixed positioning is tested and deemed unsupported, the class is removed, allowing any fixed-positioned elements to safely degrade to some other layout.
9+
10+
One caveat in details of the approach: there are a few known browsers that report false results when running the included feature test. These browsers are no longer in development, but since they are popular, this script looks for them name and deems their `position:fixed` support as false immediately, never needing to run the test. Of course, this sort of blacklisting is quite untenable to maintain, so it is only used in the event that a feature test can not be reliably used. These browsers are Android 2.1, Opera Mobile (less than 11.0, 11.5 works but dynamically re-positions instead of true fixed), Opera Mini (latest), and Firefox Mobile (latest).
11+
12+
Hat tip: the idea behind the testing portion of this approach was inspired by @Kangax's [Position Fixed Test](http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED)
13+
14+
## Usage
15+
16+
Just qualify any `position:fixed` usage in your stylesheet with a `.fixed-supported` parent class selector, like so:
17+
18+
.fixed-supported header { position: fixed; }
19+
20+
That class will be present on the HTML element in CSS fixed-supporting browsers. You can apply an initial/degraded layout in browsers that don't support fixed positioning properly by writing selectors that do not use the `.fixed-supported` selector.
21+
22+
See [`index.html`](http://filamentgroup.github.com/fixed-fixed/) for an example.
23+
24+
## Available in [Bower](http://bower.io/)
25+
26+
bower install filament-fixed

‎bower_components/filament-fixed/bower.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"name": "filament-fixed",
3+
"version": "0.1.2",
4+
"main": ["fixedfixed.js"],
5+
"ignore": [
6+
"**/.*"
7+
],
8+
"dependencies": {}
9+
}

‎bower_components/filament-fixed/fixedfixed.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/*! Fixedfixed: a CSS position:fixed qualifier. (c)2012 @scottjehl, Filament Group, Inc. Dual license: MIT and/or GPLv2 */
2+
(function( w, undefined ){
3+
4+
var htmlclass = "fixed-supported",
5+
el = w.document.createElement( "div" ),
6+
ua = w.navigator.userAgent,
7+
docEl = w.document.documentElement;
8+
9+
// fix the test element
10+
el.style.position = "fixed";
11+
el.style.top = 0;
12+
13+
// support test
14+
function checkFixed(){
15+
16+
var scroll = "scrollTop" in w.document.body ? w.document.body.scrollTop : docEl.scrollTop;
17+
18+
// only run test if there's a scroll we can compare
19+
if( scroll !== undefined && scroll > 0 && w.document.body ){
20+
21+
w.document.body.insertBefore( el, w.document.body.firstChild );
22+
23+
if( !el.getBoundingClientRect || el.getBoundingClientRect().top !== 0 ){
24+
// Fixed is not working or can't be tested
25+
docEl.className = docEl.className.replace( htmlclass, "" );
26+
}
27+
28+
// remove the test element
29+
w.document.body.removeChild( el );
30+
31+
// unbind the handlers
32+
if( w.removeEventListener ){
33+
w.removeEventListener( "scroll", checkFixed, false );
34+
}
35+
else{
36+
w.detachEvent( "onscroll", checkFixed );
37+
}
38+
}
39+
}
40+
41+
// if a particular UA is known to return false results with this feature test, try and avoid that UA here.
42+
if(
43+
// Android 2.1, 2.2, 2.5, and 2.6 Webkit
44+
!( ua.match( /Android 2\.[1256]/ ) && ua.indexOf( "AppleWebKit") > -1 ) ||
45+
// Opera Mobile less than version 11.0 (7458)
46+
!( ua.match( /Opera Mobi\/([0-9]+)/ ) && RegExp.$1 < 7458 ) ||
47+
// Opera Mini
48+
!( w.operamini && ({}).toString.call( w.operamini ) === "[object OperaMini]" ) ||
49+
// Firefox Mobile less than version 6
50+
!( ua.match( /Fennec\/([0-9]+)/ ) && RegExp.$1 < 6 )
51+
// If necessary, add the other untestable browsers here...
52+
){
53+
//add the HTML class for now.
54+
docEl.className += " " + htmlclass;
55+
56+
// bind to scroll event so we can test and potentially degrade
57+
if( w.addEventListener ){
58+
w.addEventListener( "scroll", checkFixed, false );
59+
}
60+
else{
61+
w.attachEvent( "onscroll", checkFixed );
62+
}
63+
}
64+
65+
w.FixedFixed = checkFixed;
66+
}( this ));

‎bower_components/filament-fixed/index.html

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset=utf-8 />
5+
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
6+
<title>Fixed Fixed</title>
7+
<script src="fixedfixed.js"></script>
8+
<style>
9+
body { font-family: sans-serif; color: #444; margin: 0 auto; padding: 50px 20px; position: relative; max-width: 600px }
10+
.top, .bottom { position: absolute; left: 0; right: 0; background: #000; color: #fff; text-align: center; border: solid black; border-width: 1px 0; padding: 1em; }
11+
.top { top: 0; }
12+
.bottom { bottom: 0; }
13+
.fixed-supported .top, .fixed-supported .bottom { position: fixed; }
14+
</style>
15+
</head>
16+
<body>
17+
18+
<div class="top">
19+
Fixed to viewport top, when supported.
20+
</div>
21+
22+
<h1>Fixed-fixed</h1>
23+
24+
<p>A test page for the <a href="https://github.com/filamentgroup/fixed-fixed">Fixed-fixed project</a></p>
25+
26+
<p>This test page includes a test to qualify the application of CSS <code>position:fixed</code>, which enjoys very spotty support across devices. It assumes fixed-positioning works initially, adding a class of <code>fixed-supported</code> that can be used to qualify any <code>position:fixed</code> rules. When the page is scrolled, it runs a test to determine if fixed-positioning is working properly, if not, the class is removed, allowing any fixed-positioned elements to safely degrade to some other layout.</p>
27+
28+
29+
30+
31+
32+
33+
34+
35+
<p>And now, some fake content to allow scrolling...</p>
36+
37+
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
38+
39+
<h2>Header Level 2</h2>
40+
41+
<ol>
42+
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
43+
<li>Aliquam tincidunt mauris eu risus.</li>
44+
</ol>
45+
46+
<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>
47+
48+
<h3>Header Level 3</h3>
49+
50+
<ul>
51+
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
52+
<li>Aliquam tincidunt mauris eu risus.</li>
53+
</ul>
54+
55+
<pre><code>
56+
#header h1 a {
57+
display: block;
58+
width: 300px;
59+
height: 80px;
60+
}
61+
</code></pre>
62+
63+
64+
65+
66+
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
67+
68+
<h2>Header Level 2</h2>
69+
70+
<ol>
71+
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
72+
<li>Aliquam tincidunt mauris eu risus.</li>
73+
</ol>
74+
75+
<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>
76+
77+
<h3>Header Level 3</h3>
78+
79+
<ul>
80+
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
81+
<li>Aliquam tincidunt mauris eu risus.</li>
82+
</ul>
83+
84+
<pre><code>
85+
#header h1 a {
86+
display: block;
87+
width: 300px;
88+
height: 80px;
89+
}
90+
</code></pre>
91+
92+
93+
94+
95+
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
96+
97+
<h2>Header Level 2</h2>
98+
99+
<ol>
100+
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
101+
<li>Aliquam tincidunt mauris eu risus.</li>
102+
</ol>
103+
104+
<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>
105+
106+
<h3>Header Level 3</h3>
107+
108+
<ul>
109+
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
110+
<li>Aliquam tincidunt mauris eu risus.</li>
111+
</ul>
112+
113+
<pre><code>
114+
#header h1 a {
115+
display: block;
116+
width: 300px;
117+
height: 80px;
118+
}
119+
</code></pre>
120+
121+
122+
123+
124+
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
125+
126+
<h2>Header Level 2</h2>
127+
128+
<ol>
129+
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
130+
<li>Aliquam tincidunt mauris eu risus.</li>
131+
</ol>
132+
133+
<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>
134+
135+
<h3>Header Level 3</h3>
136+
137+
<ul>
138+
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
139+
<li>Aliquam tincidunt mauris eu risus.</li>
140+
</ul>
141+
142+
<pre><code>
143+
#header h1 a {
144+
display: block;
145+
width: 300px;
146+
height: 80px;
147+
}
148+
</code></pre>
149+
150+
151+
152+
153+
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
154+
155+
<h2>Header Level 2</h2>
156+
157+
<ol>
158+
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
159+
<li>Aliquam tincidunt mauris eu risus.</li>
160+
</ol>
161+
162+
163+
164+
165+
166+
167+
168+
169+
170+
<div class="bottom">
171+
Fixed to viewport bottom, when supported.
172+
</div>
173+
174+
175+
176+
</body>
177+
</html>

‎bower_components/jquery/.bower.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "jquery",
3+
"version": "1.10.2",
4+
"description": "jQuery component",
5+
"keywords": [
6+
"jquery",
7+
"component"
8+
],
9+
"main": "jquery.js",
10+
"license": "MIT",
11+
"homepage": "https://github.com/components/jquery",
12+
"_release": "1.10.2",
13+
"_resolution": {
14+
"type": "version",
15+
"tag": "1.10.2",
16+
"commit": "6b2390db24ba3490ca75251eec4888f7342bf4da"
17+
},
18+
"_source": "git://github.com/components/jquery.git",
19+
"_target": ">=1.9.1 <2.0.0",
20+
"_originalSource": "jquery"
21+
}

‎bower_components/jquery/.gitignore

Whitespace-only changes.

‎bower_components/jquery/README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
jQuery Component
2+
================
3+
4+
Shim repository for the [jQuery](http://jquery.com).
5+
6+
Package Managers
7+
----------------
8+
9+
* [Bower](http://twitter.github.com/bower/): `jquery`
10+
* [Component](https://github.com/component/component): `components/jquery`
11+
* [Composer](http://packagist.org/packages/components/jquery): `components/jquery`

0 commit comments

Comments
 (0)