[FIXED] How to change entire header on scroll

Issue

I have a client that wants a header like on this site http://www.solewood.com/ I have found a few questions here but they are geared only for a certain element of the header. Here is the site I am working on http://treestyle.com/ The password is vewghu They are both shopify sites. Any help would be greatly appreciated.

Solution

If you inspect the solewoood website you can get an idea of how they've implemented the header.

When the page is at the top, there is this CSS for the header div:

<div class="header">

.header {
    position: fixed;
    transition: all 500ms ease 0s;
    width: 100%;
    z-index: 1000;
}

And when you scroll down, the .header_bar CSS class is added to the div as well:

<div class="header header_bar">

.header_bar {
    background-color: #FFFFFF;
    border-bottom: 1px solid #E5E5E5;
}

.header {
    position: fixed;
    transition: all 500ms ease 0s;
    width: 100%;
    z-index: 1000;
}

There are a few other things that are also changed when the user scrolls down from the top (logo, text colour, etc.), but you get the idea.

If you are unsure how to detect if the user is at the top of the page, see here.

EDIT:

In response to your comment, try using jQuery's .toggleClass() with 2 parameters.

For example:

$(window).scroll(function(e){
    $el = $('.header');
    $el.toggleClass('header_bar', $(this).scrollTop() > 0); 
}); 

Answered By - Steph Sharp

Answer Checked By - Mary Flores (PHPFixing Volunteer)