How do I make my header div scroll until it reaches the top of the page?

Question

I'm currently using fixed positioning to keep my header at the top of the page, even as users scroll. However, I'd like to add a logo and other content above the header, but not remain fixed like the header does. Is there a way to use CSS or HTML to have the header scroll normally with this content until the header reaches the top of the page, where it will act as it does now and hover above the text on the page?

Update
I'm not very experienced with jQuery and Javascript. This is the HTML code for my header:

<div class="navbar-fixed-top" role="navigation">
    <div class="container">
            <ul class="pull-left">
                <li class="selected"><a href="index.html">Home</a></li>
                <li><a href="about/index.html">About</a></li>
                <li><a href="clients/index.html">Clients</a></li>
            </ul>
                <div class="logobackground">
                    <a href="index.html"><img class="logo" src="img/logo.png"></a>
                </div>
            <ul class="pull-right">
              <li><a href=“mailto:........@...biz">Contact</a></li>
        </ul>
    </div>
</div>

What Javascript or jQuery would I have to use and where would I put it in my site's directory?

Answer 1

You need javascript (jquery) for this.

The following jsfiddle http://jsfiddle.net/5n4pF/4/ (not the neetest example) show how to do this. The most important thing is that the jquery is correct. You should use:

$(window).scroll(function(){
        if ($(window).scrollTop() >= 147) {
            $("#top_nav").addClass("fixed");

        } else {
            $("#top_nav").removeClass("fixed");
        }
});

now you can style your #top_nav.fixed so it will stay at the top of the page and your #top_nav so it has a normal position.