Conditional Fixed Positioning Using jQuery.CSS

Now most of the websites use CSS for fixing the positioning to pin elements to the top or bottom of a webpage so they never scroll out of user view. This technique is commonly used for navigation elements on sites that require the user to scroll through many screenfuls of information on a single page. Here is the simple code


<!doctype html>
<html>
<head>
<title>Conditional Fixed Positioning with jQuery</title>

<style type="text/css">
#wrapper {
	width: 960px; 
	margin: 0 auto;
}

#header {
	border: 1px solid;
	padding: 10px;
	margin-bottom: 10px;
}

#content {
	float: right;
	width: 620px;
	padding: 0 10px 10px;
	border: 1px solid;
	margin-bottom: 10px;
}

#left-column {
	width: 300px;
	float: left;
	position: relative;
}

#sidenav {
	border: 1px solid;
	margin-bottom: 10px;
	background-color: #F0F0F0;
	padding: 5px;
}

.sidenav-fixed {
	position:fixed;
	top:0;
	margin:0;
	width: 288px;
}

#links {
	border: 1px solid;
	padding: 5px;
}

h3 {
	padding-left: 5px;
}

</style>


<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.ba-throttle-debounce.min.js"></script>
<script type="text/javascript" src="modernizr-2.0.6.min.js"></script>
<script type="text/javascript" src="modernizr-custom-tests.js"></script>
<script type="text/javascript">

$(document).ready(function() {

	if (Modernizr.positionfixed && !Modernizr.appleios && !Modernizr.android) {
		
		// cache selector queries
		var sidenav = $('#sidenav'),
		sidenavWrap = $('#sidenav-wrap'),
		view = $( window ),
		sidenavHeight = sidenav.outerHeight(true),
		sidenavWrapperOffset = sidenavWrap.offset();

		function horizontalScrollCheck() {
			// update sidenav left position when horizontal scrollbar exists and is scrolled			
			if (view.scrollLeft() > 0) {
				sidenav.css('left', (-1 * view.scrollLeft() + 8));
			}
			else if (sidenav.css('left') != sidenavWrapperOffset.left) {
				sidenav.css('left', sidenavWrapperOffset.left);
			}
		}
		
		function stickyNavCheck() {

			// apply fixed positioning when sidenav scrolls to the top of the browser and is smaller than viewport height
			if ($(this).scrollTop() > sidenavWrapperOffset.top && view.height() > sidenavHeight){
			
				if (!sidenav.hasClass('sidenav-fixed') ) {
					sidenav.addClass('sidenav-fixed');
					
					// fill visual space of static positioned sidenav
					sidenavWrap.css('margin-bottom', sidenavHeight);
				}
				else {
					horizontalScrollCheck();
				}
				
			} else {
				if (sidenav.hasClass('sidenav-fixed') ) {
					sidenav.removeClass('sidenav-fixed');
					sidenavWrap.css('margin-bottom', 0);
				}
			}		
		
		}
		
		// using Cowboy's jQuery throttle/debounce plugin to throttle the scroll event
		view.bind("scroll resize", $.throttle( 100, stickyNavCheck ) );
		
		// update offset and left position of sidenav on resize event
		view.bind("resize", $.throttle( 100, function() {
				sidenavWrapperOffset = $('#sidenav-wrap').offset();
				if (sidenav.hasClass('sidenav-fixed') ) {
					horizontalScrollCheck();
				}
			})
		);

	}	
	
});

</script>
</head>

<body>

<div id="wrapper">
	
	<div id="header">
		<h1>Conditional Fixed Positioning w/ jQuery</h1>
	</div>
	
	<div id="left-column">
	
		<div id="sidenav-wrap">
			<div id="sidenav">
				<h2>Sticky side navigation</h2>
				<ul>
					<li><a href="#1">Ut consequat est vitae erat</a></li>
					<li><a href="#2">Praesent egestas nulla vel</a></li>
					<li><a href="#3">Aenean placerat libero vel</a></li>
					<li><a href="#4">Morbi viverra lacus pretium</a></li>
					<li><a href="#5">Ut sit amet orci at magna</a></li>
					<li><a href="#6">Suspendisse accumsan molestie</a></li>
					<li><a href="#7">Praesent scelerisque</a></li>
				</ul>
				<a href="#">Back to Top</a>
			</div>
		</div>	
		
	
		
	</div>
	
	
</div>
</body>

</html>

This is demo for fixed postioning of a div

fixed postion

I want to fixed "sidenav-wrap" div position. You can download full source code from right menu bottom section.

If any query then please give a comment.

About these ads

About shafiqul
I am shafiq, i have passed B.Sc. in Computer Science and Engineering. 2010 from Rajshahi University of Engineering & Technology, Rajshahi. CGPA: 3.30 out of 4.00.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Resource

Web Development Resource

skrwebdesigner

Designer Tutorial

php tutorial

Code and examples of php,javascript,jquerymobiles,yii,codeigniter

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: