jQuery Sticky Float

Teorem

just a template that just modify DOM if JavaScript is enabled ( that mean that the page is still accesbile if CSS or JavaScript are disabled).

Try yourself.

Code

/*
 * TERMS OF USE - Sticky Float
 *
 * Open source under the BSD License.
 *
 * Copyright © 2011 Jan Cajthaml
 * All rights reserved.
 */

 $(document).ready(function(){

///////////////////////////////////////////////////////////////

	$('h1').each(function(index)
	{
	    $(this).wrap("
      <div class=\"wrapper\" id=\"section"+index+"Wrapper\" title=\""+index+"\">
       <div id=\"section"+index+"\"></div>
       </div>
      ");
	});

	$("body").append("<div id=\"section"+$("h1").size()+"Wrapper\"></div>");
	$("body").before("<div id=\"section0Wrapper\"></div>");

	$(window).scroll(function(){

		$("h1").each(function(index)
		{
			if(index>0)
			checkElem(index);

		});

	});

///////////////////////////////////////////////////////////////

function checkElem(id)
{

		var top = $(window).scrollTop();
		var y = 100;

		var cur = $('#section'+(id)+'Wrapper').position().top-y;
		var prev = $('#section'+(id-1)+'Wrapper').position().top-y;
		var el = $('#section'+(id));

		if(top < cur && top > prev+100)
			scroll(el);

		else
			stick(el);

}

///////////////////////////////////////////////////////////////

function scroll(element)
{
	element.addClass("float");
}

///////////////////////////////////////////////////////////////

function stick(element)
{
	element.removeClass("float");
}

///////////////////////////////////////////////////////////////

});

Needed

<link href="css/jQuery.Sticky.css" rel="stylesheet" type="text/css">
<script type='text/javascript' src='js/jquery.js'></script>
<script type="text/javascript" src="js/jQuery.Sticky.js"></script>

Example

<h1>Title 1</h1>
<p>text</p>

<h1>Title 2</h1>
<p>text</p>

<h1>Title 2</h1>
<p>text</p>

Watch Demo or Download zip package.