How to keep header visible while scrolling

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.