From 1cb6d48dd92a993268c2cdf34450520a9684931a Mon Sep 17 00:00:00 2001 From: scottjehl Date: Tue, 15 May 2012 01:13:36 +0545 Subject: [PATCH] adding files --- README.md | 19 ++++++ index.html | 172 +++++++++++++++++++++++++++++++++++++++++++++++ positionfixed.js | 61 +++++++++++++++++ 3 files changed, 252 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 positionfixed.js diff --git a/README.md b/README.md new file mode 100644 index 0000000..e4b5d2d --- /dev/null +++ b/README.md @@ -0,0 +1,19 @@ +# CSS `position:fixed` feature test + +(c)2012 @scottjehl, Filament Group + +## Explanation + +CSS fixed-positioning varies widely in browser support, and it's difficult to test. This repo includes a test to qualify the application of CSS position:fixed. Rather than testing immediately, it needs to wait for the user to scroll to see if fixed positioning is working properly. Because of this, the script assumes fixed-positioning works initially, adding a class of `fixed-supported` that can be used to qualify any `position:fixed` 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. + +## 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 fixed-supporting browsers. You can apply an initial layout without using the `.fixed-supported` selector to provide a fallback for browsers that don't support fixed positioning properly. + +## Compressed source: + + (function(a,b){function f(){var e="scrollTop"in a.document.body?a.document.body.scrollTop:a.document.documentElement.scrollTop;if(e!==b&&e>0&&a.document.body){a.document.body.insertBefore(d,a.document.body.firstChild);if(!d.getBoundingClientRect||d.getBoundingClientRect().top!==0)a.document.documentElement.className=a.document.documentElement.className.replace(c,"");a.document.body.removeChild(d),a.removeEventListener?a.removeEventListener("scroll",f,!1):a.removeEvent("onscroll",f,!1)}}var c="fixed-supported",d=a.document.createElement("div"),e=a.navigator.userAgent;d.style.position="fixed",d.style.top=0,e.match(/Android 2\.[1256]/)&&e.indexOf("AppleWebKit")>-1||(a.document.documentElement.className+=" "+c,a.addEventListener?a.addEventListener("scroll",f,!1):a.attachEvent("onscroll",f,!1))})(this) diff --git a/index.html b/index.html new file mode 100644 index 0000000..64ba736 --- /dev/null +++ b/index.html @@ -0,0 +1,172 @@ + + + + + + Position Fixed + + + + + +
+ Fixed to viewport top, when supported. +
+ +

This page includes a test to qualify the application of position:fixed. It assumes fixed-positioning works initially, adding a class of fixed-supported that can be used to qualify any position:fixed 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.

+ + + + + + + + +

Fake content to allow scrolling...

+

Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

+ +

Header Level 2

+ +
    +
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. +
  2. Aliquam tincidunt mauris eu risus.
    3. +
+ +

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.

+ +

Header Level 3

+ + + + 

+		#header h1 a { 
+			display: block; 
+			width: 300px; 
+			height: 80px; 
+		}
+
+ + + + +

Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

+ +

Header Level 2

+ +
    +
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. +
  2. Aliquam tincidunt mauris eu risus.
    3. +
+ +

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.

+ +

Header Level 3

+ + + + 

+		#header h1 a { 
+			display: block; 
+			width: 300px; 
+			height: 80px; 
+		}
+
+ + + + +

Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

+ +

Header Level 2

+ +
    +
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. +
  2. Aliquam tincidunt mauris eu risus.
    3. +
+ +

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.

+ +

Header Level 3

+ + + + 

+		#header h1 a { 
+			display: block; 
+			width: 300px; 
+			height: 80px; 
+		}
+
+ + + + +

Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

+ +

Header Level 2

+ +
    +
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. +
  2. Aliquam tincidunt mauris eu risus.
    3. +
+ +

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.

+ +

Header Level 3

+ + + + 

+		#header h1 a { 
+			display: block; 
+			width: 300px; 
+			height: 80px; 
+		}
+
+ + + + +

Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

+ +

Header Level 2

+ +
    +
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. +
  2. Aliquam tincidunt mauris eu risus.
    3. +
+ + + + + + + + + +
+ Fixed to viewport bottom, when supported. +
+ + + + + diff --git a/positionfixed.js b/positionfixed.js new file mode 100644 index 0000000..f12f089 --- /dev/null +++ b/positionfixed.js @@ -0,0 +1,61 @@ +/* + CSS position:fixed qualifier. + (c)2012 @scottjehl, Filament Group +*/ +(function( w, undefined ){ + + var htmlclass = "fixed-supported", + el = w.document.createElement( "div" ), + ua = w.navigator.userAgent; + + // 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 : w.document.documentElement.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 + w.document.documentElement.className = w.document.documentElement.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.removeEvent( "onscroll", checkFixed, false ); + } + } + } + + // 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 ) + + // TODO. Add the other untestable browsers here... + ){ + //add the HTML class for now. + w.document.documentElement.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, false ); + } + } +}( this )); \ No newline at end of file