Log In

Email:
Password:
Keep me logged in

Forgot Password

Email:

Sign In | Sign Up | Forgot Password?



Archives
2013
March (7)
February (13)
January (14)
2012
December (12)
November (12)
October (12)
September (6)
August (12)
July (6)
June (12)
May (6)
April (12)
March (6)
February (12)
January (12)
2011
December (11)
November (14)
October (11)
September (4)
August (16)
July (8)
Categories
CSS (28)
jQuery (116)
PHP (52)
.htaccess (5)
iPod (1)
iPhone (16)
Sponsored Links


Fixed Header
CSS jQuery Javascript
Browse Category | Monday, May 7, 2012 |

Description: Keeps the header at the top of the web page at all times.







Code:
<html>
<head>
<script src="http://wcetdesigns.com/assets/javascript/jquery.js"></script>
<script>
window.onscroll = z;
window.onload = z;
window.onresize = z;
function z(){
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").css({"position":"fixed", "top":"0"});
var hw = $(".header").width(); //SETS ITS OWN WIDTH INSTEAD OF THAT OF THE WINDOW
$(".header").css({"width":hw+"px"});
} else {
$(".header").css({"position":"static"});
}
} else {
$(".header").css({"position":"static"});
}
}
</script>
</head>
<body>
<div class="header">
<img src="http://images.wcetdesigns.com/banners/MiniBanner.png">
</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>
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>
 0    0
Views: 647 Downloads: 29




(Optional in case you want a reply)



0 Comments


2009-2013 W.C.E.T. DesignsFacebook | Twitter | Google+