Fixed header while scrolling down the website

Question

I am designing a website, i am trying to have a fixed header and the header shrinking a bit while someone scroll down the website.

HTML:

<div id="headerwrapper">
<div id="header">
Call Us today 0000-123456 | info@mysite.com
</div>
<div id="header_bottom">
<div id="header_content">
<div id="logo">
<img src="images/logo.png" width="115px" height="90px" alt="left"/>
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a>
<li><a href="#">About Us</a>
<li><a href="#">Our Services</a>
<li><a href="#">Our Work</a>
<li><a href="#">Contact Us</a>
</ul>
</div>
</div>
</div>
</div>
<div id="banner">
<img src="images/banner.jpg"/>
</div>
<div class="content">

<div id="website">
<div id="website_left_content">
<img src="images/website.jpg" />
</div>
<div id="website_right_content">
<h1>Custom Website Design</h1>
<p style="line-height:17px;">Content goes here
<br/><br/>
We only use the latest and updated code to build your website and all the websites we build are mobile responsive, so your website will work across all mobile and tablet devices.
</p>
</div>
</div>

<div id="logo_content">
<div id="logo_left_content">
<h1>Logo Design</h1>
 <p style="line-height:17px;">New business starting off to well established businesses, we can help enhance your businesses brand. Our services include logo design, business stationery, brochures, flyers, reports, newsletters and all your graphical needs.
<br/><br/>
A logo is important for any business as it represents who you are and acts as your business branding, this is why it is vital to have a professional logo design so that it can leave a lasting impression on your customers
</p>
</div>
<div id="logo_right_content">
<img src="images/logo.jpg" />
</div>
</div>

CSS:

    body{
    font-family:arial;
    font-size:13px;
    width:100%;
    margin:0;
    padding:0;
}
#seperator_top{
    width:100%;
    height:5px;
    background-color:#7CBB00;
}
#headerwrapper{
    width:100%;
    background-color:#000;
    height:auto;
}
#header{
    width:950px;
    height:auto;
    margin:0 auto;
    overflow:auto;
    background-color:#000;
    color:#FFF;
    padding:15px;
}
#header_bottom{
    width:100%;
    height:auto;
    background-color:#000;
    border-top:1px solid white;
}
#header_content{
    width:950px;
    height:auto;
    margin:0 auto;
    overflow:auto;
}
#logo{
    width:200px;
    float:left;
}
.menu{
    float:right;
    width:550px;
    margin-left:100px;
    margin-top:20px;


}
.menu ul{
    list-style:none;
    margin:0;
    padding:0;
}

.menu ul li a{
    float:left;
    color:#FFF;
    padding:10px 10px 10px 10px;
    margin:5px;
    text-decoration:none;

}
.menu ul li a:hover{
    background-color:#7CBB00;
    border-radius:5px;
}
.content{
    width:950px;
    height:auto;
    margin:0 auto;
}
#website{
    margin-top:30px;
    width:100%;
    height:auto;
    overflow:auto;
}
#website_left_content{
    width:500px;
    height:auto;
    float:left;
}

#website_right_content{
    width:400px;
    height:auto;
    float:right;

}


#logo_content{
    margin-top:30px;
    width:100%;
    height:auto;
    overflow:auto;
}
#logo_right_content{
    width:500px;
    height:auto;
    float:right;
}

#logo_left_content{
    width:400px;
    height:auto;
        float:left;
}

I am trying to have div having id="header_bottom" to be fixed on top when scrolling down the website. i added position:fixed top:30px to the css but it covers a bit of banner as well. i want this div to be fixed while scrolling down without disturbing the website apperance. Kinldy guide me how this can be done. A working fiddle will be great source for me to learn. Thanks

Answer 1

Simple fix:

To make the header bar "stick", you can use some very simple CSS (position:fixed). This might create headaches if you want to involve mobile browsers.

As your tags show, you're aware you'll need some Javascript for the shrinking of the header as you scroll.

I've made you a simple example of how you can do this.

The idea is simple: when the page scrolls, detect this, and judge if the scroll value is more than 0. If so, add a class to your head; if not, remove that same class.

Using transition you can create a smooth effect on the header that makes it appear to shrink (or whatever else you are looking to achieve).

Note: You do need to check how much the page has scrolled as soon as it loads. This is because when you refresh the page after scrolling, the browser will pop you down to where you left off.

Here's the code:

JS:

$(function () {

    // Run the function as the page loads, in case the user refreshes after scrolling
    adjustHeader();

    // Add event listener for scrolling
    $(document).on('scroll', adjustHeader);

    // Reusable function
    function adjustHeader () {
        // Check if document has scrolled at all
        if ($(document).scrollTop() > 0 )
            $('#headerwrapper').addClass('scrolled');
        else
            $('#headerwrapper').removeClass('scrolled');
    }
});

CSS:

#headerwrapper {
    width:100%;
    background-color:#000;
    height:auto;

    /* Keep the bar at the top of the page */
    position: fixed;
    top: 0;

    /* This is to create the animation: */
    transition: top 350ms;
}

/* Here is our "scrolled" class" */
#headerwrapper.scrolled {
    /* For simplicity's sake: */
    top : -25px;
}

Answer 2

Add the following to your #headerwrapper in the CSS:

{ position: fixed, top: 0; }

Check this jsFiddle for reference: http://jsfiddle.net/s9z3wmtq