ScrollFixed

A div that scrolls automatically with the window, but is fixed on the page, otherwise.

by Somenath Sinha

HTML

<div id="container">
		<div id="description">
			<p>
				Chuck Norris does not sleep. He waits Police label anyone attacking Chuck Norris as a Code 45-11... a suicide, What was going through the minds of all of Chuck Norris' victims before they died? His shoe. Chuck Norris can slam a revolving door Chuck Norris invented Kentucky Fried Chicken's famous secret recipe, with eleven herbs and spices. But nobody ever mentions the twelfth ingredient: Fear, Chuck Norris is so fast, he can run around the world and punch himself in the back of the head, Remember the Soviet Union? They decided to quit after watching a DeltaForce marathon on Satellite TV. There is no chin behind Chuck Norris' beard. There is only another fist. Chuck Norris is my Homeboy. Chuck Norris doesn't read books. He stares them down until he gets the information he wants. 
			</p>
		</div>
		<div id="sidebar">
			<ul id="navLinks">
				<li>Home</li>
				<li>About Us</li>
				<li>Terms</li>
				<li>Conditions</li>
				<li>Contact Us</li>
			</ul>
		</div>
		<div id="main">
			<p>
				Chuck Norris uses pepper spray to spice up his steaks Chuck Norris was once witnessed flushing a Port-A-Potty by jabbing its walls, Chuck Norris will attain statehood in 2009. His state flower will be the Magnolia, Chuck Norris' hand is the only hand that can beat a Royal Flush, Outer space exists because it's afraid to be on the same planet with Chuck Norris. 
			</p>
			<p>
				Do you ever wonder why you would submit a fact based on Chuck Norris? That is the power of Chuck Norris. Chuck Norris' hand is the only hand that can beat a Royal Flush, Chuck Norris has two speeds. Walk, and Kill.Contrary to popular belief, America is not a democracy, it is a Chucktatorship. Chuck Norris doesn't wash his clothes, he disembowels them The Great Wall of China was originally created to keep Chuck Norris out. It failed miserably, The chief export of Chuck Norris is Pain. 
			</p>
			<p>
				The amount of people who live in the United...

CSS

body {
	font-family: verdana;
	font-size: small;
	background-color: #B7BBDC;
}

#container {
	max-width: 980px;
  position: relative;
}

#main {
	width: 300px;
	margin: auto;
	padding: 20px;
	background-color: #A6D98F;
}

#description {
	width: 200px;
	background-color: #F2E5A0;
	padding: 5px;
	float: right;
	margin: 5px;
}

#sidebar {
	width: 200px;
	background-color: #F2B3C4;
	position: relative;
	padding: 5px;
	float: right;
	clear: right;
	margin: 5px;
}

#sidebar.sticky {
  position: fixed;
  top: 0;
  right: 5px;
}

#navLinks {
	list-style-type: none;
}

#navLinks li {
	display: block;
	padding: 10px;
	text-transform: uppercase;
}

JavaScript

$(document).ready( function() 
{

	var descrHeight = $("#description").height();
  var sidebar = $("#sidebar");
	$(document).scroll(function() 
	{
		if($(document).scrollTop() > descrHeight)
			sidebar.addClass('sticky');
		else
			sidebar.removeClass('sticky');
	});

});