How to create a fixed header and scrolling content area

2 Views

I’ve bee experimenting with a site I’m working on. My client wants the header with its nav and logo intact, so visitors always have the ability to access the navbar while scrolling to read the page content. I have added fixed to my wrapper div and that keeps the background static, but in this design the background is also part of the header.

My page is http://axiomwest.com/client-services/

Read More

How can I achieve a fixed header area and allow scrolling only in the main content area?

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. Alright, what you’ll need to do here is separate the header into it’s own wrapper. What I did to get this to work is to close the #wrapper div right after you close the #header div and start a new div with the same class hfeed and a new ID other than wrapper.

    Should look like this:

    <div class="hfeed" id="wrapper">
    <div id="header">
        <div id="logo">...
        (stuff in here)
    </div><!-- #header -->
</div>
<div class="hfeed" id="wrapper-lower">
    <div id="main">
        <div id="container">...
        (so on, so forth)

    Now if you apply position:fixed to the #wrapper element, you’ll get the desired effect. You will still need to change the way your graphics work to really sell the effect. I might suggest using a .png where everything under the red line of the swoosh is transparent. The file size will be much bigger, but if this is the only large image you are using, you’ll be fine.

    Almost forgot! You’ll also need to apply a top padding to #wrapper-lower in order to push it down past the fixed element. The padding-top of #wrapper-lower should be the same as the total height of #header.