I want to make the header menu of my website stick to the top of the page when scrolling past it, but NOT the announcement bar above it. So that when you scroll, it first scrolls down normally until the announcement bar is not visible anymore, and then the header sticks to the top of page after scroll.
I am using the Debut theme.
I have read this thread: https://community.shopify.com/c/Shopify-Design/Sticky-Fixed-Header-and-Navigation-for-Debut-Theme/td..., applied both versions and they work. However in Version 2, instead of behaving like I described above, the announcement bar scrolls and the header is sticky, but not to the top of the viewport. It just stays sticky where it is on first load, hence after scrolling there is space above it in which you can also see the website scrolling underneath.
I have applied the code from Option 2 above in theme.css.liquid and in theme.js, and then started playing around with it to get that offset effect, using this tutorial: http://jsfiddle.net/gxRC9/502/
The fiddle example above is EXACTLY what I am trying to achieve: scroll until header reaches top of page, then fix it to make it sticky. (with everything above it on initial load scrolling away outside of viewport)
Now I have this code in theme.css.liquid:
/*Sticky header*/
#SearchDrawer {
z-index:1001;
}
.site-header {
-webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
-moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
-ms-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
-o-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
background-color: {{ settings.color_body_bg }};
}
.fixed {
position: fixed;
z-index:1000;
left:0;
top:0;
}
#PageContainer {
padding-top: 80px;
}
@media screen and (max-width: 749px) {
#PageContainer {
padding-top: 70px;
}
}
(i know i dont need the page container stuff right now, most importantly I separated the .site-header css edit (for a nice dropshadow) from the .fixed class, which is what I want to only appear after the offset scroll as described in JS below)
and this code in theme.js
var stickyOffset = $('.site-header').offset().top;
$(window).scroll(function(){
var header = $('.site-header'),
scroll = $(window).scrollTop();
if (scroll >= stickyOffset) header.addClass('fixed');
else sticky.removeClass('fixed');
});
Where its setting a variable for the offset distance of siteheader from the top and then telling it to apply my .fixed class from above CSS once the scroll point went past that level.
But, its not working...
I am guessing its either something to do with measuring/setting the offset distance or with Jquery in the theme.
(FYI: what I dont want to do is work with fixed "px" values in the offset. I want to keep it dynamic. FYI #2: I want this to happen on both desktop & mobile).
Would love if somebody could help me find my thinking error !! Thanks guys
