| How to make a page header that scrolls into a fixed position
|
Shreya
msg:4501032 | 8:24 am on Sep 28, 2012 (gmt 0) |
hi,
I want to create this type of header.Header not on page but when scrolling the page header comes down n fix at one place (on top)? please help me. [edited by: tedster at 3:22 pm (utc) on Sep 28, 2012]
|
tedster
msg:4501233 | 4:52 pm on Sep 28, 2012 (gmt 0) |
The behavior you describe cannot be generated with HTML alone, as far as I know. It will require some JavaScript.
Best guess, it is probably a plug-in for the jquery library. If you "view source" on a working example page, you can learn more.
|
typomaniac
msg:4501857 | 1:54 am on Sep 30, 2012 (gmt 0) |
Not sure if I know what you're looking for but, are you talking about something that stays in place at the top of the browser and even if you scroll down the page the header will always remain visible at the top..in essence, floating? If that is what you're looking for take a peek-a-boo at [quackit.com...] There is a menu that operates like that and you could position it anywhere you want and adjust measurement, etc.,.
|
tedster
msg:4501893 | 3:53 am on Sep 30, 2012 (gmt 0) |
That's part of it. The OP also said that the "header not on page but when scrolling the page header comes down". Then at that point the header stays fixed as your scroll.
|
birdbrain
msg:4501972 | 12:03 pm on Sep 30, 2012 (gmt 0) |
Hi there Shreya,
here is a very basic example for you to try...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>fixed header on scroll</title>
<style type="text/css">
body {
margin:0;
background-color:#f0f0f0;
}
#container {
width:960px;
height:2000px; /* this value is only here to create scrolling */
padding:50px 20px 20px;
border:1px solid #999;
margin:auto;
background-color:#fff;
box-shadow: 0 0 8px #333;
}
#header {
position:fixed;
width:960px;
height:30px;
padding:10px 20px;
margin:-109px 0 0 -20px;
border-bottom:1px solid #987;
background-color:#fed;
box-shadow: 0 0 8px #666;
font-weight:bold;
color:#654;
text-align:center;
}
</style>
<script type="text/javascript">
function init(){
c=-109; /* this value is equal to the total height of the
#header - (height, padding, border and box-shadow) */
speed=40; /* adjust this value to suit */
test=true;
onscroll=function(){
if(test==true){
godown();
test=false;
}
}
}
function godown(){
document.getElementById('header').style.marginTop=c+'px';
c++;
if(c>=-50) { /* this value is equal to the #container padding top */
clearTimeout(st);
c=-50;
return;
}
else {
st=setTimeout(function(){godown();},speed);
}
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>
</head>
<body>
<div id="container">
<div id="header">This is the fixed header</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis. Vivamus at metus eget eros consequat fringilla.
Quisque magna magna, laoreet eu tempus sit amet, fringilla at
tellus. Praesent felis tortor, scelerisque vitae fringilla
non, porttitor et lacus. Ut ut sapien nec quam tincidunt
consectetur in nec lacus.
</p>
</div><!-- end #container -->
</body>
</html>
|
|
birdbrain
|
typomaniac
msg:4502233 | 2:52 am on Oct 1, 2012 (gmt 0) |
Wow! Awesome! That could add some real class to a page.
|
Shreya
msg:4502342 | 6:29 am on Oct 1, 2012 (gmt 0) |
Thanx birdbrain it's working but another thing what I want to do is whenever scroll on top, the header should invisible
|
birdbrain
msg:4502422 | 10:37 am on Oct 1, 2012 (gmt 0) |
Hi there Shreya,
do you mean something like this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>fixed header on scroll</title>
<style type="text/css">
body {
margin:0;
background-color:#f0f0f0;
}
#container {
width:960px;
height:2000px; /* this value is only here to create scrolling */
padding:50px 20px 20px;
border:1px solid #999;
margin:auto;
background-color:#fff;
box-shadow: 0 0 8px #333;
}
#header {
position:fixed;
width:960px;
height:30px;
padding:10px 20px;
margin:-109px 0 0 -20px;
border-bottom:1px solid #987;
background-color:#fed;
box-shadow: 0 0 8px #666;
font-weight:bold;
color:#654;
text-align:center;
}
</style>
<script type="text/javascript">
function init(){
c=-109; /* this value is equal to the
#header margin-top value) */
speed=40; /* adjust this value to suit */
test=true;
num=1;
onscroll=function(){
window.scrollY?
sy=window.scrollY:
sy=document.body.parentNode.scrollTop;
if(test==true){
godown();
test=false;
}
if((test==false)&&(sy==0)){
num=-1
godown();
}
}
}
function godown(){
document.getElementById('header').style.marginTop=c+'px';
c+=num;
if(c<=-109){
clearTimeout(st);
num=1
test=true;
return;
}
else {
if(c>=-50) { /* this value is equal to the
#container padding-top value */
clearTimeout(st);
return;
}
else {
st=setTimeout(function(){godown();},speed);
}
}
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>
</head>
<body>
<div id="container">
<div id="header">This is the fixed header</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis. Vivamus at metus eget eros consequat fringilla.
Quisque magna magna, laoreet eu tempus sit amet, fringilla at
tellus. Praesent felis tortor, scelerisque vitae fringilla
non, porttitor et lacus. Ut ut sapien nec quam tincidunt
consectetur in nec lacus.
</p>
</div><!-- end #container -->
</body>
</html>
|
|
birdbrain
|
Shreya
msg:4502926 | 12:03 pm on Oct 2, 2012 (gmt 0) |
yes exactly i want this... thank u so much
|
birdbrain
msg:4502949 | 1:16 pm on Oct 2, 2012 (gmt 0) |
No problem, you're very welcome. ;)
birdbrain
|
|
|
