Welcome to WebmasterWorld Guest from 54.147.10.12

Forum Moderators: incrediBILL

Message Too Old, No Replies

How to make a page header that scrolls into a fixed position

     
8:24 am on Sep 28, 2012 (gmt 0)

New User

joined:Sept 21, 2012
posts:14
votes: 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]

4:52 pm on Sept 28, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 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.
1:54 am on Sept 30, 2012 (gmt 0)

Junior Member from US 

5+ Year Member

joined:Feb 11, 2010
posts: 96
votes: 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.,.
3:53 am on Sept 30, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 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.
12:03 pm on Sept 30, 2012 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4


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
2:52 am on Oct 1, 2012 (gmt 0)

Junior Member from US 

5+ Year Member

joined:Feb 11, 2010
posts: 96
votes: 0


Wow! Awesome! That could add some real class to a page.
6:29 am on Oct 1, 2012 (gmt 0)

New User

joined:Sept 21, 2012
posts:14
votes: 0


Thanx birdbrain it's working but another thing what I want to do is whenever scroll on top, the header should invisible
10:37 am on Oct 1, 2012 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4


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
12:03 pm on Oct 2, 2012 (gmt 0)

New User

joined:Sept 21, 2012
posts:14
votes: 0


yes exactly i want this... thank u so much
1:16 pm on Oct 2, 2012 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4


No problem, you're very welcome. ;)


birdbrain