Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Scrollable Div with Fixed Header Example

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.


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


<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
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>
<style type="text/css">
#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 class="header1">
<img src="https://lh5.googleusercontent.com/_B28NJpJ61hA/TdgnS7lh7mI/AAAAAAAAAi4/oLTicIRgEIw/FinalLogo.png">
</div>
<div class="header" style="display:none">
<div id="nav">
<ul>
<li><a href="#">Demo Link 1</a></li>
<li><a href="#">Demo Link 2</a></li>
<li><a href="#">Demo Link 3</a></li>
<li><a href="#">Demo Link 4</a></li>
</ul>
<br class="clearLeft" />
</div>
</div>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
Scroll down for the demo...<br>
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 RSS subscribe by email 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...

Irtekaz Ahmed Khan said...

wo yes bru simple code and large work...thanks.

Samsung said...

Thanks bro, it helped me to redesign my weblog

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.

Give your Valuable Comments

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

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.