« New American Idols | Main | Refugees from the Days of the Dying Sun »

Easy Scroll-Aware Hovering HTML Container with jQuery

I needed a quick and easy way to have a container hover on the side of a page and update with details as the user selected options. This is a simple, jQuery-based approach to doing so. Note that the portion at the end is included if you are needing to fire the positioning from a repost in asp.net, in this instance I needed to do so as the floating container was only displayed and filled via an async event when the user selected their first item.

	#oHeader {height:200px;width:100%;background:lightyellow;margin-bottom:20px;} /* Not needed */
	#oAnchorObject {height:2000px;width:450px;background:lightgreen;} /* Not needed */
	#oSidebar {position:fixed;left:500px;border:1px solid #ff0000;padding:40px} /* Position and left or right value needed */

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function () {
	$(window).scroll(function () {
	function RepositionCard() {
			var eTop = $('#oAnchorObject').offset().top;
			if (eTop - $(window).scrollTop() <= 1) {
				$("#oSidebar").css("top", 0);
			else {
				$("#oSidebar").css("top", eTop - $(window).scrollTop());
		catch(err) {}


<div id="oHeader">
	Here is some header content to show how the locking works

<div id="oAnchorObject">
	Here is your large content block to which the sidebar will orient

<div id="oSidebar">
	This will hover/stick

Optional for firing the client event after ajax postback from C#, use in page load where needed:

ScriptManager.RegisterClientScriptBlock(Page, typeof(Page), "MyScript", "RepositionCard();", true);

PrintView Printer Friendly Version

EmailEmail Article to Friend

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>