RSS

How to keep header visible while scrolling

24 Sep

Actually i had seen this as a common problem in designing. People are ok with vertical scrolling, but they want the page header to remain visible while scrolling too. And its a valid demand specially when we have long list view. During scrolling a long list sometimes we missed the column labels, and then again scroll up to get them and come down to browse the list is not a good idea. We need some kind of concept which keep the header always visible while scrolling down the page. Now days lot of websites, even Gmail behaving like this. Drupal also provide couple of its themes having take care of this designing issue.

Actually its quite simple to implement in our website too. Earlier I had written one blog `CSS Positioning`, in which I mention five property values for CSS Position attribute. Among them property value `fixed` is going to work for us. Let me remind one more time what CSS `position: fixed` does. Basically it makes the element’s position relative to the browser window. That’s it, we also need the same. Let’s provide the same to our header div (position: fixed;). Now our header will also not disappear even if we¬† scroll our window down.

Sometimes we have an importance to keep at top some other element other than header during scrolling. That time its necessary to add `top: 0px;` too with the above `position: fixed` line as the CSS for the element. Actually headers are generally at top of the page so for them its not required, but to preserve other elements like the ‘Label Column of the Table’ we need it.

Following is initial position of secondary bar in Gmail :

Below one is position of secondary bar after scrolling in Gmail :

Important thing to take care here is when we are trying to keep visible an element which is not at the top of the page, then we have to add both the CSS properties `position:fixed; top:0px;` dynamically to the element after passing certain height. And this can be done with the help of JavaScript.

1. First we have to check when to add these properties (Possible after passing the header or certain dimension).

2. Second we have to preserve the default state of the element when its already visible at its position on the page.

Following JavaScript code written be me will definitely help us to attain this :

$(document).ready(function() {$(window).scroll( function() {if( $(this).scrollTop() > 100 ) {

document.getElementById( ‘secondryHeader’ ).style.width=”100%”;
document.getElementById( ‘secondryHeader’ ).style.position=”fixed”;
document.getElementById( ‘secondryHeader’ ).style.top=”0px”;

else {

document.getElementById( ‘secondryHeader’ ).style.position=”static”;

});

});

Here I don’t want to keep visible my primary-header (Which is of 100px in height) during scrolling. While I want to keep my secondary header (#secondryHeader) visible during scrolling too. That’s why I had added the required two CSS properties dynamically when the 100px dimension (of primary header) is passed out. And later I had set it to its default state.

Hope this helps.

About these ads
 
6 Comments

Posted by on September 24, 2011 in CSS, JavaScript

 

Tags: , , , , , ,

6 responses to “How to keep header visible while scrolling

  1. C.M.Upadhyay

    September 30, 2011 at 7:21 pm

    Nice link for face book knowledge. Akhil Wable has also given fruitful informations.
    – Shoonya Akankshi

     
  2. Arihant

    December 29, 2011 at 10:57 am

    Hi,

    When i insert this code in dreamweaver inside the script tags, its shows that there is a syntax error

     
    • Amit Kumar Tiwari

      January 11, 2012 at 11:17 am

      What kind of syntax error you had found, just to make myself correct.

       
  3. Arihant

    December 29, 2011 at 11:37 am

    Got rid of the syntax error…any idea y this doesnt work with wordpress? I have tried a couple of these solutions but none seem to work.

     
    • Amit Kumar Tiwari

      January 11, 2012 at 11:22 am

      That’s good, Probably the reason might be that the `$(document).ready` is being overwritten somewhere in code.

       

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: