homepage Welcome to WebmasterWorld Guest from 54.211.219.178
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved