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>
<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 {
	width: 288px;

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

h3 {
	padding-left: 5px;


<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src=""></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 && ! {
		// 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() > && view.height() > sidenavHeight){
				if (!sidenav.hasClass('sidenav-fixed') ) {
					// fill visual space of static positioned sidenav
					sidenavWrap.css('margin-bottom', sidenavHeight);
				else {
			} else {
				if (sidenav.hasClass('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') ) {




<div id="wrapper">
	<div id="header">
		<h1>Conditional Fixed Positioning w/ jQuery</h1>
	<div id="left-column">
		<div id="sidenav-wrap">
			<div id="sidenav">
				<h2>Sticky side navigation</h2>
					<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>
				<a href="#">Back to Top</a>


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 shafiqul
I am Shaikh Shafiqul Islam.I am working as a software engineer at Premium Web Cart in Bangladesh. I had completed my B.SC majoring Computer Science and Engineering in 2010 at the Dept of CSE in Ruet(Rajshahi University of Engineering & Technology), a leading engineering university of Bangladesh. I want to explore myself with latest technology and also want to develop my Career with well-established and fast growing IT Industry in Bangladesh. I started this blog to keep all the interesting PHP, HTML,Javascript,Ajax, Jquery related information.

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s


Web Development Resource

UI and UX Design

User Interface and User Experience


code,Tips,Tricks in php,mysql,javascript,jquery,ajax,yii,yii2,codeigniter,laravel,drupal,slim,bootstrap,api,jQuery Mobile

%d bloggers like this: