How to make header sticky but NOT the announcement bar

tiei
Tourist
5 0 1

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

Replies 8 (8)
ThemuMitch
Explorer
45 11 15

@tiei,

 

Please could you provide a link to your store and I'll take a look?

Was your problem solved? Please mark this post as an Accepted Solution
tiei
Tourist
5 0 1

floedogbottle.com

ThemuMitch
Explorer
45 11 15

Sorry, could I also have the visitor password so I can see the header?

Was your problem solved? Please mark this post as an Accepted Solution
tiei
Tourist
5 0 1

floebottle#2020

Played around with code a bit more but just put it back to Option 1 of the first tutorial now (so it looks different than before, just fyi)

diego_ezfy
Shopify Partner
2300 413 541

@tiei 

I have coded a professional, highly tested solution for this if you'd like to try. 

You can do exactly that on this version: allow only the navbar but not the announcement bar. All fully controllable at the customize page.

You can download/install it under 1 minute, just click here to read the tutorial.

Kind regards,
Diego

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.
Ideactone
New Member
4 0 0

Hi, is this issue solved? I would be interested.

alejandrort
Tourist
6 0 0

Hey, were you able to find a solution to this problem? Im still interested. Thanks in advance

SvenniB
New Member
1 0 0

Was this issue ever resolved? I have the exact same problem using the Capital theme..