jQuery Scrollable Div with Fixed Header Example

By: Suresh Dasari Apr 2, 2013

Introduction:

Here I will explain jQuery fixed header or div on scrolling example or facebook like fixed table header on scrolling in jQuery. jQuery fixed header on scroll is used to display header at the top of the web page at all times.

Description:

In previous posts I explained jQuery floating fixed navigation menu example, jQuery fixed div header notification bar on scroll with fade in out, jQuery Google Currency Converter API Example, jQuery generate thumbnails from youtube videos, jQuery Change style of controls, jQuery Add fade in effect to webpage, and many articles relating to JQuery and modal popup. Now I will explain how to implement jQuery fixed header on scrolling example.

To implement this functionality we need to write the code like as shown below

<html>

<head>

window.onscroll = scrollheader;

window.onload = scrollheader;

window.onresize = scrollheader;

function scrollheader() {

var ww = window.innerWidth; //WINDOW WIDTH

var wh = window.innerHeight; //WINDOW HEIGHT

var hw = $(".header").width(); //HEADER WIDTH

var hh = $(".header").height(); //HEADER HEIGHT

var o = window.pageYOffset; //OFFSET OF THE WINDOW

//IF THE PAGE IS SCROLLED TO WHERE THE HEADER WOULD BE INVISIBLE

if(o>hh){

//IF WINDOW WIDTH > HEADER WIDTH

if (ww > hw) {

$(".header").show();

$(".header").css({"position":"fixed", "top":"0"});

} else {

$(".header").css({ "position": "static" });

$(".header").hide();

}

} else {

$(".header").css({ "position": "static" });

$(".header").hide();

}

</script>

#nav {

padding: 5px;

background: #999;

}

#nav ul {

margin: 0;

padding: 0;

}

#nav li {

float: left;

padding: 3px 8px;

background-color: #FFF;

margin: 0 10px 0 0;

color: #F00;

list-style-type: none;

}

#nav li a {

color: #F00;

text-decoration: none;

}

#nav li a:hover {

text-decoration: underline;

}

br.clearLeft {clear: left;

}

</style>

</head>

<body>

</div>

<ul>

</ul>

</div>

Scroll down for the demo...<br>

</body>

</html>

Demo

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

Subscribe by RSS

Subscribe by Email

4 comments :

Anonymous said...: sir, please help me...

i want to do 3 levels of approvals using windows workflow in visual studio 2010...

but i cannot get it clearly...

please help me... am new to workflow.. plzz help me...; April 3, 2013 at 1:03 AM
Irtekaz Ahmed Khan said...: wo yes bru simple code and large work...thanks.; April 3, 2013 at 5:27 AM
Samsung said...: Thanks bro, it helped me to redesign my weblog; April 24, 2013 at 7:32 PM
Anonymous said...: Hi sir.Thank you for your wonderful work, it's working fine but i am additionally want to maintain a scroll position of the div after postback. In this plugin i could not achieve this still now can you please guide me.... my email id is : prasanna230592@gmail.com. I hope that you will mail me soon.; December 4, 2014 at 11:48 PM

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments ( Atom )

ASP.NET,C#.NET,VB.NET,JQuery,JavaScript,Gridview