ravasthi/ios5-fixed-positioning.html

## ios5-fixed-positioning.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <title>iOS fixed positioning/JS scroll test</title>

    <style type="text/css" media="screen">
      html
      {
        font-size: 62.5%;
      }

      body
      {
        font-size: 1.6rem;
        line-height: 2.2rem;
      }

      #page
      {
        margin: 4.4rem 0;
        max-width: 80rem;
      }

      #fixed-menu
      {
        position: fixed;
        top: 0;
        left: 0;
        padding: 4.4rem 2rem 2.2rem;
        width: 25rem;
      }

      #content, #footer
      {
        margin-left: 30rem;
      }
    </style>

  </head>
  <body id="ios-fixed-positioning">
    <div id="page">
      <div id="fixed-menu">
        Integer quis elit eget risus adipiscing pharetra. Morbi a porttitor enim. Ut quis mauris vel leo faucibus tincidunt ac in ante. Nullam ut nisi quis sapien placerat pharetra quis vitae justo.

        <p>
          <a class="scroll-here" href="#top">Top</a>
        </p>
        <p>
          <a class="scroll-here" href="#footer">Bottom</a>
        </p>
      </div> <!-- /#fixed-menu -->
      <div id="content">
        <h1 id="top">Top of page</h1>
        <p>Phasellus interdum lorem ac mi gravida porta. Nam congue cursus scelerisque. Aenean rutrum eleifend justo, nec gravida justo pharetra eget. Nullam adipiscing interdum aliquam. Sed tortor enim, porta sed placerat eu, sodales non velit. Donec dignissim scelerisque dolor, in vulputate lorem tristique vel.</p>

        <p>Donec mattis varius arcu, at eleifend sapien elementum at. Proin nunc neque, luctus nec sodales sed, malesuada eu augue. Nunc consectetur nulla in risus dapibus venenatis. Nunc sed ipsum et augue ullamcorper commodo. Nunc in eros quis dui iaculis laoreet iaculis ac lacus. Etiam eros justo, tincidunt quis congue vitae, tempor nec sapien. Sed accumsan elementum libero id porttitor. Suspendisse potenti. Phasellus sit amet ligula sed massa vulputate malesuada eu a mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque dui arcu, rutrum id molestie id, congue nec nulla. Donec molestie tincidunt ullamcorper. Nunc adipiscing commodo tellus eget molestie. Aenean vitae consequat lectus. Etiam vitae augue felis, at placerat velit. Aliquam consequat, nibh ultrices consectetur luctus, massa justo sollicitudin lacus, eu mollis dolor urna et mi.</p>

        <p>Donec leo ligula, interdum ut laoreet quis, ullamcorper nec arcu. Nam mattis, risus eget aliquam ullamcorper, mauris sem tincidunt nunc, vel aliquet urna enim vitae risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consectetur rhoncus porttitor. Vestibulum laoreet ante nibh. Sed neque dui, pretium id volutpat non, pretium sit amet libero. Nullam mi mi, mollis sed interdum non, ornare eu lorem. Aliquam et erat mi, non malesuada nunc. Nulla ut nisi vitae nisl ornare ornare. Nulla justo nibh, porta et rutrum eget, fringilla vitae lectus. Vivamus faucibus est in nulla malesuada sed viverra diam consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis et nulla vel nunc pharetra ultricies at semper ligula.</p>
      </div> <!-- /#content -->
      <div id="footer">
        <h2>Footer</h2>
        <p>Morbi consectetur est eu magna mattis vel viverra felis elementum. Morbi accumsan dolor nec diam accumsan ut fermentum ipsum euismod. Duis tempor hendrerit congue. Pellentesque ut orci orci. Nam consectetur aliquam lorem, id porttitor eros tempus eu. Morbi ultricies tortor nec mi placerat eget tristique nibh mollis. Quisque at convallis dui.</p>

        <p>Praesent quis laoreet nunc. Nunc pulvinar, tortor ut venenatis pulvinar, diam eros pulvinar dolor, nec eleifend nulla tellus sit amet erat. Integer ut placerat ante. Donec vitae purus non turpis vehicula pellentesque a ut velit. Ut sed lorem ac turpis pretium ornare. In malesuada condimentum varius. Nunc iaculis sollicitudin sapien pulvinar vestibulum. Fusce lorem nunc, pellentesque a lacinia a, porta eu elit. Nam lacus ipsum, dictum interdum pharetra ut, aliquam non velit. Ut sodales, lorem sollicitudin malesuada posuere, eros est bibendum ante, et commodo risus diam nec metus. Vestibulum accumsan fringilla augue et tempor.</p>
      </div> <!-- /#footer -->
    </div> <!-- /#page -->

    <!-- Javascript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">
      (function($) {
        $(function() {
          $("a.scroll-here").click(function(event) {
            var dest = $(this).attr("href");
            var destST = $(dest).offset().top;
            $("html:not(:animated), body:not(:animated)").animate(
              { scrollTop: destST - 20 }, 500
            );
            event.preventDefault();
            event.stopPropagation();
          });
        });
      })(jQuery);

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>

	<title>iOS fixed positioning/JS scroll test</title>

	<style type="text/css" media="screen">
	html
	{
	font-size: 62.5%;
	}

	body
	{
	font-size: 1.6rem;
	line-height: 2.2rem;
	}

	#page
	{
	margin: 4.4rem 0;
	max-width: 80rem;
	}

	#fixed-menu
	{
	position: fixed;
	top: 0;
	left: 0;
	padding: 4.4rem 2rem 2.2rem;
	width: 25rem;
	}

	#content, #footer
	{
	margin-left: 30rem;
	}
	</style>

	</head>
	<body id="ios-fixed-positioning">
	<div id="page">
	<div id="fixed-menu">
	Integer quis elit eget risus adipiscing pharetra. Morbi a porttitor enim. Ut quis mauris vel leo faucibus tincidunt ac in ante. Nullam ut nisi quis sapien placerat pharetra quis vitae justo.

	<p>
	<a class="scroll-here" href="#top">Top</a>
	</p>
	<p>
	<a class="scroll-here" href="#footer">Bottom</a>
	</p>
	</div> <!-- /#fixed-menu -->
	<div id="content">
	<h1 id="top">Top of page</h1>
	<p>Phasellus interdum lorem ac mi gravida porta. Nam congue cursus scelerisque. Aenean rutrum eleifend justo, nec gravida justo pharetra eget. Nullam adipiscing interdum aliquam. Sed tortor enim, porta sed placerat eu, sodales non velit. Donec dignissim scelerisque dolor, in vulputate lorem tristique vel.</p>

	<p>Donec mattis varius arcu, at eleifend sapien elementum at. Proin nunc neque, luctus nec sodales sed, malesuada eu augue. Nunc consectetur nulla in risus dapibus venenatis. Nunc sed ipsum et augue ullamcorper commodo. Nunc in eros quis dui iaculis laoreet iaculis ac lacus. Etiam eros justo, tincidunt quis congue vitae, tempor nec sapien. Sed accumsan elementum libero id porttitor. Suspendisse potenti. Phasellus sit amet ligula sed massa vulputate malesuada eu a mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque dui arcu, rutrum id molestie id, congue nec nulla. Donec molestie tincidunt ullamcorper. Nunc adipiscing commodo tellus eget molestie. Aenean vitae consequat lectus. Etiam vitae augue felis, at placerat velit. Aliquam consequat, nibh ultrices consectetur luctus, massa justo sollicitudin lacus, eu mollis dolor urna et mi.</p>

	<p>Donec leo ligula, interdum ut laoreet quis, ullamcorper nec arcu. Nam mattis, risus eget aliquam ullamcorper, mauris sem tincidunt nunc, vel aliquet urna enim vitae risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consectetur rhoncus porttitor. Vestibulum laoreet ante nibh. Sed neque dui, pretium id volutpat non, pretium sit amet libero. Nullam mi mi, mollis sed interdum non, ornare eu lorem. Aliquam et erat mi, non malesuada nunc. Nulla ut nisi vitae nisl ornare ornare. Nulla justo nibh, porta et rutrum eget, fringilla vitae lectus. Vivamus faucibus est in nulla malesuada sed viverra diam consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis et nulla vel nunc pharetra ultricies at semper ligula.</p>
	</div> <!-- /#content -->
	<div id="footer">
	<h2>Footer</h2>
	<p>Morbi consectetur est eu magna mattis vel viverra felis elementum. Morbi accumsan dolor nec diam accumsan ut fermentum ipsum euismod. Duis tempor hendrerit congue. Pellentesque ut orci orci. Nam consectetur aliquam lorem, id porttitor eros tempus eu. Morbi ultricies tortor nec mi placerat eget tristique nibh mollis. Quisque at convallis dui.</p>

	<p>Praesent quis laoreet nunc. Nunc pulvinar, tortor ut venenatis pulvinar, diam eros pulvinar dolor, nec eleifend nulla tellus sit amet erat. Integer ut placerat ante. Donec vitae purus non turpis vehicula pellentesque a ut velit. Ut sed lorem ac turpis pretium ornare. In malesuada condimentum varius. Nunc iaculis sollicitudin sapien pulvinar vestibulum. Fusce lorem nunc, pellentesque a lacinia a, porta eu elit. Nam lacus ipsum, dictum interdum pharetra ut, aliquam non velit. Ut sodales, lorem sollicitudin malesuada posuere, eros est bibendum ante, et commodo risus diam nec metus. Vestibulum accumsan fringilla augue et tempor.</p>
	</div> <!-- /#footer -->
	</div> <!-- /#page -->

	<!-- Javascript -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript" charset="utf-8">
	(function($) {
	$(function() {
	$("a.scroll-here").click(function(event) {
	var dest = $(this).attr("href");
	var destST = $(dest).offset().top;
	$("html:not(:animated), body:not(:animated)").animate(
	{ scrollTop: destST - 20 }, 500
	);
	event.preventDefault();
	event.stopPropagation();
	});
	});
	})(jQuery);

	</script>
	</body>
	</html>