How to change entire header on scroll

Question

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.

Ok, I got it to work using this: $(window).scroll(function(e){ $el = $('.header'); if ($(this).scrollTop() > 0){ $el.toggleClass('header_bar'); } }); however, the elements keep toggling continuously down the page, any fixes for this? — Lowrye, Dec 02 '13 at 21:06
See my edit below. Use `$el.toggleClass('header_bar', $(this).scrollTop() > 0);` instead of the if statement in your jQuery function. — Steph Sharp, Dec 03 '13 at 23:20

score 1 · Answer 1 · answered Jun 18 '21 at 01:48

This shows it quite nicely: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_shrink_header_scroll

I used this technique to turn the background-color to white on scroll, then back to transparent when back at top.

And if you wanted to completely swap out headers. You could duplicate the headers, then use this to turn display on and off for those.

score 0 · Accepted Answer · edited May 23 '17 at 10:31

0

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); 
});

edited May 23 '17 at 10:31

Community

1
1

answered Nov 26 '13 at 23:05

Steph Sharp

11,462
5
44
81

I have been studying this information, but still haven't been able to write javascript that works. They have a lot more elements going on than I do. Here is my theme.liquid: – Lowrye Dec 02 '13 at 14:55
– Lowrye Dec 02 '13 at 15:05
And css: .header { position: fixed; z-index: 1000; width: 100%; background-color: transparent; color: #ffffff; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; -ms-transition: all 500ms ease; transition: all 500ms ease; } .header_bar { position: fixed; z-index: 1000; width: 100%; background-color: #ffffff; border-bottom: solid 1px #e5e5e5; color: #000000; } – Lowrye Dec 02 '13 at 15:06
This is what I had ended up doing, but I still couldn't figure out the logo or changing text color, so the client canceled this, thank you so much for your help. – Lowrye Dec 04 '13 at 15:22

How to change entire header on scroll

2 Answers2