logo
Stay Connected #Facebook #Twitter #Google+ #Feed
Discussions and news on Programming, Web Development, Webmasters And Related Topics

How To Make Webpage Fixed Header and Scroll Page Under

I came across this useful tutorial and I felt compelled to share it. Looking at this forum am posting on, you can see that the black header remains fixed while the rest of the page scrolls under it. The same rare feature is available on Facebook. This feature is very useful to web designers who deem it fit to make some menu items/links readily and always available to their web visitors irrespective of the page they are or scroll length, without needing to scroll all up to access a function.

Am sharing this with audacity from the owner of Best Naija! There are many scenarios, namely:
Fixed header
Fixed header and left-sidebar
Fixed header and right-sidebar
Fixed header and footer
Fixed left-sidebar
Fixed left-sidebar and header
Fixed left-sidebar and right-sidebar
Fixed left-sidebar and footer
Fixed right-sidebar
Fixed right-sidebar and header
Fixed right-sidebar and footer
Fixed footer

Fixed header

Code: Select all
<!-- IE in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title>Your page title: Fixed header?</title>
<style type="text/css">
 body{
  margin:0;
  padding:<length> 0 0 0;
 }
 div#header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:<length>;
 }
 @media screen{
  body>div#header{
   position: fixed;
  }
 }
 * html body{
  overflow:hidden;
 }
 * html div#content{
  height:100%;
  overflow:auto;
 }
</style>
<div id="header"> header will be here</div>
<div id="content"> content will be here, and will scroll under the fixed header</div>


With the above code, your header will remain fixed while the rest of the page scrolls under it 'hidden'!
When am less busy, I can share the rest of the options. Good luck in your projects. :good:


» 05 Jul 2012, 9:56 pm by

afHTML


[Snr. Member]
Posts: 53;Gender: None
Joined: 22 Jan 2012, 4:00 pm
Location: texas
^

Wait o! Good one here..bt I wld really need d header and d right bar fixed...! Waitin f your quick response!

[ m ]


» 06 Jul 2012, 11:29 pm by

Boma


[Snr. Member]
Posts: 47;Gender: Male
Joined: 05 Mar 2012, 9:32 am
Location: Montreal
Photos: 4
^

Re: How To Make Webpage Fixed Header and Scroll Page Under

Boma wrote:Wait o! Good one here..bt I wld really need d header and d right bar fixed...! Waitin f your quick response!

[ m ]


For fixed header and right-sidebar, use this code:

Code: Select all
<!-- IE in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title>Fixed header and right-sidebar</title>
<style type="text/css">
 body{
  margin:0;
  padding:header-<length> right-sidebar-<length> 0 0;
 }
 div#header{
  position:absolute;
  top:0;
  left:0;
  width:500%;
  height:header-<length>;
 }
 div#right-sidebar{
  position:absolute;
  top:header-<length>;
  right:0;
  width:right-sidebar-<length>;
  height:100%;
 }
 @media screen{
  body>div#header{
   position:fixed;
  }
  body>div#right-sidebar{
   position:fixed;
  }
 }
 * html body{
  overflow:hidden;
 }
 * html div#content{
  height:100%;
  overflow:auto;
 }
</style>
<div id="header"> header </div>
<div id="right-sidebar"> right-sidebar </div>
<div id="content"> content </div>


Note that the above are 2 different scenarios. Take one or the other. Good luck!


» 08 Jul 2012, 9:05 am by

afHTML


[Snr. Member]
Posts: 53;Gender: None
Joined: 22 Jan 2012, 4:00 pm
Location: texas
^
3 posts >> Page 1 of 1

Top

©2013 Best Naija!, All Rights Reserved. Web Hosting by Xcludom Services. Privacy | Terms