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 Fixed Header (DIV) on Page Scroll or Window Scroll with Example

Mar 3, 2015
Introduction
  
Here I will explain jQuery fixed header or div on scrolling example or jQuery fixed header or div on page scroll or windows scroll with example. jQuery fixed header on scroll is used to display header at the top of the web page at all times during page or window scroll.


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

0 comments :

Give your Valuable Comments

Other Related Posts

© 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.