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.
2 Answers
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.
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);
});
-
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:– LowryeCommented Dec 2, 2013 at 14:55
-
<script>$( "div.header_bar" ).scrollTop( 96 );</script></head><body><div class="header"><div class="container content"><div class="sixteen columns {% unless template contains"index"%}header_border{% else %}homepage{% endunless %}"><div class="one-third column logo alpha"><a href="treestyle.com" title="Treestyle"><imgsrc="cdn.shopify.com/s/files/1/0288/6610/files/…" alt="Treestyle" /></a></div><div class="two-thirds column nav omega"><div class="mobile_hidden mobile_menu_container"><ul class="top_menu– LowryeCommented Dec 2, 2013 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; }– LowryeCommented Dec 2, 2013 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.– LowryeCommented Dec 4, 2013 at 15:22
$el.toggleClass('header_bar', $(this).scrollTop() > 0);
instead of the if statement in your jQuery function.