Welcome to WebmasterWorld Guest from 54.227.110.209

Forum Moderators: incrediBILL

Message Too Old, No Replies

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

     

Shreya

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

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

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



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

1:54 am on Sep 30, 2012 (gmt 0)

5+ Year Member



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

3:53 am on Sep 30, 2012 (gmt 0)

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



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

12:03 pm on Sep 30, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

2:52 am on Oct 1, 2012 (gmt 0)

5+ Year Member



Wow! Awesome! That could add some real class to a page.

Shreya

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

10:37 am on Oct 1, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

12:03 pm on Oct 2, 2012 (gmt 0)



yes exactly i want this... thank u so much

birdbrain

1:16 pm on Oct 2, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



No problem, you're very welcome. ;)


birdbrain
 

Featured Threads

Hot Threads This Week

Hot Threads This Month