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

Forum Moderators: open

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)

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)

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)

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)

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)

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)

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)

No problem, you're very welcome. ;)

birdbrain