Introduction
This article explains 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC4UfsTOHWoCGchAp8dyCMtf4t-qD8x53iHiqBFuM9cVne_-SjnQJKSYSXqm5MYcGLdUFtrR3YoX_cveIsJzbzv1Dr8jhF8hUiTJPORSzP0GbiQVv5YgscO2whzu0SyGRBu71Ukkdu8FU/s1600/11694915_1426459737682156_4238755009304555395_n1.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>
No comments:
Post a Comment