Initial commit.

README.md

@@ -1,4 +1,34 @@
-fixed-sticky
-============
+# Fixed-sticky: a CSS `position:sticky` polyfill
 
-A position: sticky polyfill with a safer position: fixed fallback.
+- (c)2013 @zachleat, Filament Group
+- MIT license
+
+## Explanation
+
+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).
+
+## Usage
+
+Just qualify element you’d like to be `position:sticky` with a `fixedsticky` class and add your own CSS to position the element.
+
+    .fixedsticky { top: 0; }
+
+See [`demo.html`](http://filamentgroup.github.com/fixed-sticky/demo.html) for an example.
+
+## Installation
+
+Use the provided `fixedsticky.js` and `fixedsticky.css` files.
+
+### Also available in [Bower](http://bower.io/)
+
+    bower install filament-sticky
+
+## TODO
+
+* Add support for container-based position: sticky. Only constrains to the document right now.
+* Add support for `bottom` positioning. Supports only top right now.
+* Tests (of course). I have a serious case of developer guilt releasing this without tests.
+
+## Release History
+
+* `v0.1.0`: Initial release.

bower.json

@@ -0,0 +1,12 @@
+{
+  "name": "filament-sticky",
+  "version": "0.1.0",
+  "main": ["fixedsticky.js", "fixedsticky.css"],
+  "ignore": [
+    "**/.*"
+  ],
+  "dependencies": {
+    "jquery": ">=1.9.1 <2.0.0",
+    "filament-fixed": ">=0.1.1"
+  }
+}

bower_components/filament-fixed/.bower.json

@@ -0,0 +1,21 @@
+{
+  "name": "filament-fixed",
+  "version": "0.1.2",
+  "main": [
+    "fixedfixed.js"
+  ],
+  "ignore": [
+    "**/.*"
+  ],
+  "dependencies": {},
+  "homepage": "https://github.com/filamentgroup/fixed-fixed",
+  "_release": "0.1.2",
+  "_resolution": {
+    "type": "version",
+    "tag": "v0.1.2",
+    "commit": "12760b2e3225238a2508e2f8b4d3ec89afe1f689"
+  },
+  "_source": "git://github.com/filamentgroup/fixed-fixed.git",
+  "_target": ">=0.1.1",
+  "_originalSource": "filament-fixed"
+}

bower_components/filament-fixed/README.md

@@ -0,0 +1,26 @@
+# Fixed-fixed: a CSS `position:fixed` qualifier
+
+- (c)2012 @scottjehl, Filament Group
+- Dual license: MIT and/or GPLv2
+
+## Explanation
+
+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.
+
+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).
+
+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)
+
+## Usage
+
+Just qualify any `position:fixed` usage in your stylesheet with a `.fixed-supported` parent class selector, like so:
+
+    .fixed-supported header { position: fixed; }
+
+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.
+
+See [`index.html`](http://filamentgroup.github.com/fixed-fixed/) for an example.
+
+## Available in [Bower](http://bower.io/)
+
+    bower install filament-fixed

bower_components/filament-fixed/bower.json

@@ -0,0 +1,9 @@
+{
+  "name": "filament-fixed",
+  "version": "0.1.2",
+  "main": ["fixedfixed.js"],
+  "ignore": [
+    "**/.*"
+  ],
+  "dependencies": {}
+}

bower_components/filament-fixed/fixedfixed.js

@@ -0,0 +1,66 @@
+/*! Fixedfixed: a CSS position:fixed qualifier. (c)2012 @scottjehl, Filament Group, Inc. Dual license: MIT and/or GPLv2 */
+(function( w, undefined ){
+
+	var htmlclass = "fixed-supported",
+		el = w.document.createElement( "div" ),
+		ua = w.navigator.userAgent,
+		docEl = w.document.documentElement;
+
+	// fix the test element
+	el.style.position = "fixed";
+	el.style.top = 0;
+
+	// support test
+	function checkFixed(){
+
+		var scroll = "scrollTop" in w.document.body ? w.document.body.scrollTop : docEl.scrollTop;
+
+		// only run test if there's a scroll we can compare
+		if( scroll !== undefined && scroll > 0 && w.document.body ){
+
+			w.document.body.insertBefore( el, w.document.body.firstChild );
+
+			if( !el.getBoundingClientRect || el.getBoundingClientRect().top !== 0 ){
+				// Fixed is not working or can't be tested
+				docEl.className = docEl.className.replace( htmlclass, "" );
+			}
+
+			// remove the test element
+			w.document.body.removeChild( el );
+
+			// unbind the handlers
+			if( w.removeEventListener ){
+				w.removeEventListener( "scroll", checkFixed, false );
+			}
+			else{
+				w.detachEvent( "onscroll", checkFixed );
+			}
+		}		
+	}
+
+	// if a particular UA is known to return false results with this feature test, try and avoid that UA here.
+	if(
+		// Android 2.1, 2.2, 2.5, and 2.6 Webkit
+		!( ua.match( /Android 2\.[1256]/ ) && ua.indexOf( "AppleWebKit") > -1 ) ||
+		// Opera Mobile less than version 11.0 (7458)
+		!( ua.match( /Opera Mobi\/([0-9]+)/ ) && RegExp.$1 < 7458 ) ||
+		// Opera Mini
+		!( w.operamini && ({}).toString.call( w.operamini ) === "[object OperaMini]" ) ||
+		// Firefox Mobile less than version 6
+		!( ua.match( /Fennec\/([0-9]+)/ ) && RegExp.$1 < 6 )
+		// If necessary, add the other untestable browsers here...
+	){
+		//add the HTML class for now.
+		docEl.className += " " + htmlclass;
+
+		// bind to scroll event so we can test and potentially degrade
+		if( w.addEventListener ){
+			w.addEventListener( "scroll", checkFixed, false );
+		}
+		else{
+			w.attachEvent( "onscroll", checkFixed );
+		}
+	}
+
+	w.FixedFixed = checkFixed;
+}( this ));

bower_components/filament-fixed/index.html

@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset=utf-8 />
+		<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
+		<title>Fixed Fixed</title>
+		<script src="fixedfixed.js"></script>
+		<style>
+			body { font-family: sans-serif; color: #444; margin: 0 auto; padding: 50px 20px; position: relative; max-width: 600px }
+			.top, .bottom { position: absolute; left: 0; right: 0; background: #000; color: #fff; text-align: center; border: solid black; border-width: 1px 0; padding: 1em;  }
+			.top { top: 0; }
+			.bottom { bottom: 0; }
+			.fixed-supported .top, .fixed-supported .bottom { position: fixed; }
+		</style>
+	</head>
+	<body>
+
+		<div class="top">
+			Fixed to viewport top, when supported.
+		</div>
+
+		<h1>Fixed-fixed</h1>
+
+		<p>A test page for the <a href="https://github.com/filamentgroup/fixed-fixed">Fixed-fixed project</a></p>
+
+		<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>
+
+
+
+
+
+
+
+
+		<p>And now, some fake content to allow scrolling...</p>
+
+		<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>
+
+		<h2>Header Level 2</h2>
+
+		<ol>
+		   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+		   <li>Aliquam tincidunt mauris eu risus.</li>
+		</ol>
+
+		<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>
+
+		<h3>Header Level 3</h3>
+
+		<ul>
+		   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+		   <li>Aliquam tincidunt mauris eu risus.</li>
+		</ul>
+
+		<pre><code>
+		#header h1 a { 
+			display: block; 
+			width: 300px; 
+			height: 80px; 
+		}
+		</code></pre>
+
+
+
+
+		<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>
+
+		<h2>Header Level 2</h2>
+
+		<ol>
+		   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+		   <li>Aliquam tincidunt mauris eu risus.</li>
+		</ol>
+
+		<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>
+
+		<h3>Header Level 3</h3>
+
+		<ul>
+		   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+		   <li>Aliquam tincidunt mauris eu risus.</li>
+		</ul>
+
+		<pre><code>
+		#header h1 a { 
+			display: block; 
+			width: 300px; 
+			height: 80px; 
+		}
+		</code></pre>
+
+
+
+
+		<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>
+
+		<h2>Header Level 2</h2>
+
+		<ol>
+		   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+		   <li>Aliquam tincidunt mauris eu risus.</li>
+		</ol>
+
+		<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>
+
+		<h3>Header Level 3</h3>
+
+		<ul>
+		   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+		   <li>Aliquam tincidunt mauris eu risus.</li>
+		</ul>
+
+		<pre><code>
+		#header h1 a { 
+			display: block; 
+			width: 300px; 
+			height: 80px; 
+		}
+		</code></pre>
+
+
+
+
+		<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>
+
+		<h2>Header Level 2</h2>
+
+		<ol>
+		   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+		   <li>Aliquam tincidunt mauris eu risus.</li>
+		</ol>
+
+		<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>
+
+		<h3>Header Level 3</h3>
+
+		<ul>
+		   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+		   <li>Aliquam tincidunt mauris eu risus.</li>
+		</ul>
+
+		<pre><code>
+		#header h1 a { 
+			display: block; 
+			width: 300px; 
+			height: 80px; 
+		}
+		</code></pre>
+
+
+
+
+		<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>
+
+		<h2>Header Level 2</h2>
+
+		<ol>
+		   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+		   <li>Aliquam tincidunt mauris eu risus.</li>
+		</ol>
+
+
+
+
+
+
+
+
+
+		<div class="bottom">
+			Fixed to viewport bottom, when supported.
+		</div>
+
+
+
+	</body>
+</html>

bower_components/jquery/.bower.json

@@ -0,0 +1,21 @@
+{
+  "name": "jquery",
+  "version": "1.10.2",
+  "description": "jQuery component",
+  "keywords": [
+    "jquery",
+    "component"
+  ],
+  "main": "jquery.js",
+  "license": "MIT",
+  "homepage": "https://github.com/components/jquery",
+  "_release": "1.10.2",
+  "_resolution": {
+    "type": "version",
+    "tag": "1.10.2",
+    "commit": "6b2390db24ba3490ca75251eec4888f7342bf4da"
+  },
+  "_source": "git://github.com/components/jquery.git",
+  "_target": ">=1.9.1 <2.0.0",
+  "_originalSource": "jquery"
+}

bower_components/jquery/README.md

@@ -0,0 +1,11 @@
+jQuery Component
+================
+
+Shim repository for the [jQuery](http://jquery.com).
+
+Package Managers
+----------------
+
+* [Bower](http://twitter.github.com/bower/): `jquery`
+* [Component](https://github.com/component/component): `components/jquery`
+* [Composer](http://packagist.org/packages/components/jquery): `components/jquery`