How to fix position of top-banner bar irrespective of Vertical scrolling depth?

Hi there

this is my jsfiddle.net
http://jsfiddle.net/VmGLF/80/

I am making a top-banner which is remain fix at the top and items present in it too irrespective of vertical scrolling to down like in SitePoint.com,facebook.com

How can I acheive this?

Thanks

The correct search terms would be something like “css fixed nav” or something along those lines.

Look into “position:fixed” in CSS.

although position:fixed position is fixed but there is one more problem
content in both two block overlap

if I remove position:fixed then everything is working fine

How can I solve this problem?

You’ll need to use Javascript for this next part. I’m moving this to the JS forum for you. They can help you.

If you are just creating a fixed header then you need to ensure than the first content on the page has some padding-top equal to the height of your fixed header so that its starts below the header and then will scroll beneath the header when the page is scrolled.

That means you will need to give the header a fixed px (or em height) so that you can match it in the content div.

Beware percentage heights as they will seldom be what you want or expect.:slight_smile:

Ideally (which is why I moved it to the JS section) he’ll add onto that and allow JS to calculate the height and automate this for you, and have the CSS as fallback.

see updated but still not working

I have given margin to second block but whole block is taking margin

Where did I say add margin :smile:

I told you to add padding.

If you add margin then because of margin collapse the margin collapses onto the element above and moves that down instead.

:heart_eyes:

Yes that would be the ideal way but that has drawbacks as you would need to use the resize event to calculate the height each time the page is resized (in a responsive layout) and that can cause the page to be ‘choppy’ unless you avoid throttling the resize event.

I usually use ems for the height and padding to cater for text resize and then use media queries to cater for wrapping. It’s not perfect but saves on JS.

It’s an inherent problem with fixed headers and they are best for small menus that rarely need to wrap. For anything that holds a lot of content then fixed header elements are usually not the best approach,

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.