Created
August 21, 2013 03:14
-
-
Save trivektor/6289979 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/<html> | |
| <head> | |
| <meta name="viewport" content="initial-scale = 1.0, user-scalable = no"> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <style> | |
| body {margin: 0; padding: 0;} | |
| #width {width: 100%;} | |
| #content {position: absolute; top: 50px; left: 0; right: 0; bottom: 50px; overflow: scroll; -webkit-overflow-scrolling: touch;} | |
| p {margin-bottom: 20px;} | |
| #header {background: #000; color: #fff; height: 50px; position: fixed; top: 0; width: 100%;} | |
| #footer {background: #000; color: #fff; height: 50px; position: fixed; bottom: 0; width: 100%;} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="width"> | |
| <div id="header" class="noBounce"> header stuff</div> | |
| <div id="content"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse leo arcu, ultricies id aliquam in, hendrerit nec dui. Donec felis elit, molestie in sollicitudin quis, sollicitudin at risus. Sed ac est non diam placerat congue. Nunc diam lacus, malesuada eu vulputate in, porttitor sed nibh. Vestibulum at ipsum porttitor eros porta scelerisque. Cras erat leo, euismod a faucibus ac, adipiscing nec libero. Praesent ligula dolor, euismod ut bibendum vel, bibendum consequat est. Quisque vulputate massa tempus nisi posuere eu lacinia metus blandit. Morbi et urna urna, quis rhoncus dui. Phasellus sit amet mi vitae massa sodales molestie eu vehicula leo. Cras convallis laoreet quam. Ut accumsan, nisi vestibulum lobortis ornare, ipsum sem vehicula nisl, non commodo mauris ante at tellus.</p> | |
| <p>Mauris sodales laoreet mauris. Aliquam ac metus at sapien tincidunt tempus vitae nec quam. Morbi porta nulla nec arcu mattis facilisis. Curabitur justo sem, volutpat non laoreet non, congue et tellus. Pellentesque ut mi et diam tincidunt bibendum sit amet quis felis. Nullam fringilla iaculis lorem vel adipiscing. Nam suscipit, odio ac laoreet tempor, lectus nibh bibendum purus, id tristique nulla nibh in est. Quisque adipiscing turpis non enim gravida sagittis. Donec in augue velit, id mattis lectus. Aenean pretium rhoncus cursus. Nullam vel tincidunt dolor. Curabitur mollis malesuada mi, et semper tortor sodales eget. Morbi eros ante, feugiat nec blandit in, sagittis quis augue.</p> | |
| <p>Mauris sodales laoreet mauris. Aliquam ac metus at sapien tincidunt tempus vitae nec quam. Morbi porta nulla nec arcu mattis facilisis. Curabitur justo sem, volutpat non laoreet non, congue et tellus. Pellentesque ut mi et diam tincidunt bibendum sit amet quis felis. Nullam fringilla iaculis lorem vel adipiscing. Nam suscipit, odio ac laoreet tempor, lectus nibh bibendum purus, id tristique nulla nibh in est. Quisque adipiscing turpis non enim gravida sagittis. Donec in augue velit, id mattis lectus. Aenean pretium rhoncus cursus. Nullam vel tincidunt dolor. Curabitur mollis malesuada mi, et semper tortor sodales eget. Morbi eros ante, feugiat nec blandit in, sagittis quis augue.</p> | |
| <p>Mauris sodales laoreet mauris. Aliquam ac metus at sapien tincidunt tempus vitae nec quam. Morbi porta nulla nec arcu mattis facilisis. Curabitur justo sem, volutpat non laoreet non, congue et tellus. Pellentesque ut mi et diam tincidunt bibendum sit amet quis felis. Nullam fringilla iaculis lorem vel adipiscing. Nam suscipit, odio ac laoreet tempor, lectus nibh bibendum purus, id tristique nulla nibh in est. Quisque adipiscing turpis non enim gravida sagittis. Donec in augue velit, id mattis lectus. Aenean pretium rhoncus cursus. Nullam vel tincidunt dolor. Curabitur mollis malesuada mi, et semper tortor sodales eget. Morbi eros ante, feugiat nec blandit in, sagittis quis augue.</p> | |
| <p>Mauris sodales laoreet mauris. Aliquam ac metus at sapien tincidunt tempus vitae nec quam. Morbi porta nulla nec arcu mattis facilisis. Curabitur justo sem, volutpat non laoreet non, congue et tellus. Pellentesque ut mi et diam tincidunt bibendum sit amet quis felis. Nullam fringilla iaculis lorem vel adipiscing. Nam suscipit, odio ac laoreet tempor, lectus nibh bibendum purus, id tristique nulla nibh in est. Quisque adipiscing turpis non enim gravida sagittis. Donec in augue velit, id mattis lectus. Aenean pretium rhoncus cursus. Nullam vel tincidunt dolor. Curabitur mollis malesuada mi, et semper tortor sodales eget. Morbi eros ante, feugiat nec blandit in, sagittis quis augue.</p> | |
| <p>Mauris sodales laoreet mauris. Aliquam ac metus at sapien tincidunt tempus vitae nec quam. Morbi porta nulla nec arcu mattis facilisis. Curabitur justo sem, volutpat non laoreet non, congue et tellus. Pellentesque ut mi et diam tincidunt bibendum sit amet quis felis. Nullam fringilla iaculis lorem vel adipiscing. Nam suscipit, odio ac laoreet tempor, lectus nibh bibendum purus, id tristique nulla nibh in est. Quisque adipiscing turpis non enim gravida sagittis. Donec in augue velit, id mattis lectus. Aenean pretium rhoncus cursus. Nullam vel tincidunt dolor. Curabitur mollis malesuada mi, et semper tortor sodales eget. Morbi eros ante, feugiat nec blandit in, sagittis quis augue.</p> | |
| <p>Mauris sodales laoreet mauris. Aliquam ac metus at sapien tincidunt tempus vitae nec quam. Morbi porta nulla nec arcu mattis facilisis. Curabitur justo sem, volutpat non laoreet non, congue et tellus. Pellentesque ut mi et diam tincidunt bibendum sit amet quis felis. Nullam fringilla iaculis lorem vel adipiscing. Nam suscipit, odio ac laoreet tempor, lectus nibh bibendum purus, id tristique nulla nibh in est. Quisque adipiscing turpis non enim gravida sagittis. Donec in augue velit, id mattis lectus. Aenean pretium rhoncus cursus. Nullam vel tincidunt dolor. Curabitur mollis malesuada mi, et semper tortor sodales eget. Morbi eros ante, feugiat nec blandit in, sagittis quis augue.</p> | |
| </div> | |
| <div id="footer" class="noBounce">footer stuff</div> | |
| </div> | |
| <script type="text/javascript" src="scrollfix.js"></script> | |
| <script type="text/javascript"> | |
| //Prevent Header & Footer From Showing Browser Chrome | |
| document.addEventListener('touchmove', function(event) { | |
| if(event.target.parentNode.className.indexOf('noBounce') != -1 || event.target.className.indexOf('noBounce') != -1 ) { | |
| event.preventDefault(); } | |
| }, false); | |
| // Add ScrollFix | |
| var scrollingContent = document.getElementById("content"); | |
| new ScrollFix(scrollingContent); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment