Skip to content

Instantly share code, notes, and snippets.

@maddesigns

maddesigns/index.html

Created May 16, 2014 11:55
Show Gist options
  • Save maddesigns/fe69715a3046f4fde45f to your computer and use it in GitHub Desktop.
Save maddesigns/fe69715a3046f4fde45f to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Sven Wolfermann.
Raw
index.html
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
<![endif]-->
<div class="container">
<div class="ad">
<img src="http://placehold.it/728x90&text=superbanner" alt="">
</div>
<header role="banner">
<h1>position: sticky header</h1>
</header>
<main role="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet!</p>
</main>
<footer role="contentinfo">
<p><a href="">position: sticky tutorial</a></p>
</footer>
</div>
Raw
script.js
/* Modernizr 2.8.1 (Custom Build) | MIT & BSD
* Build: http://modernizr.com/download/#-shiv-cssclasses-prefixes-css_positionsticky-load
*/
;window.Modernizr=function(a,b,c){function v(a){j.cssText=a}function w(a,b){return v(m.join(a+";")+(b||""))}function x(a,b){return typeof a===b}function y(a,b){return!!~(""+a).indexOf(b)}function z(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:x(f,"function")?f.bind(d||b):f}return!1}var d="2.8.1",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n={},o={},p={},q=[],r=q.slice,s,t={}.hasOwnProperty,u;!x(t,"undefined")&&!x(t.call,"undefined")?u=function(a,b){return t.call(a,b)}:u=function(a,b){return b in a&&x(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=r.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(r.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(r.call(arguments)))};return e});for(var A in n)u(n,A)&&(s=A.toLowerCase(),e[s]=n[A](),q.push((e[s]?"":"no-")+s));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)u(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},v(""),i=k=null,function(a,b){function l(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function q(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return s.shivMethods?o(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(s,b.frag)}function r(a){a||(a=b);var c=n(a);return s.shivCSS&&!g&&!c.hasCSS&&(c.hasCSS=!!l(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),k||q(a,c),a}var c="3.7.0",d=a.html5||{},e=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,f=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,g,h="_html5shiv",i=0,j={},k;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",g="hidden"in a,k=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,e._prefixes=m,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+q.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))},Modernizr.addTest("csspositionsticky",function(){var a="position:",b="sticky",c=document.createElement("modernizr"),d=c.style;return d.cssText=a+Modernizr._prefixes.join(b+";"+a).slice(0,-a.length),d.position.indexOf(b)!==-1});
Raw
style.css
*,*:before,*:after {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
.ad img {
width: 100%;
}
/** sticky header **/
header {
background-color: hsla(0, 100%, 100%, 0.9);
padding: 1em 0;
text-align: center;
}
.csspositionsticky header {
position: -webkit-sticky;
position: -moz-sticky;
position: sticky;
top: 0;
}
header:after,
.csspositionsticky header:after {
content: 'NO css position sticky active';
display: block;
text-align: center;
color: red;
}
.csspositionsticky header:after {
content: 'css position sticky is active';
color: green;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment