How to make sticky header when scrolling up?

[Nico38]

Hello everybody !

I followed this tutorial :

https://community.shopify.com/c/Shopify-Design/Sticky-Fixed-Header-and-Navigation-for-Debut-Theme/td-p/518018

it works, no problem but i’m only looking when i scroll up, possible ?

thx !

[KetanKumar]

@Nico38

Welcome to the Shopify community!
and Thanks for your question.

Please share your site URL,
So I will check and provide a solution here.

[Nico38]

hi, @KetanKumar

https://www.street-style.fr/

Password : Nico38nico

[KetanKumar]

@Nico38

Thanks please flow this step

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.js.liquid->paste below code at the bottom of the file.

$(window).scroll(function() {
if ($(this).scrollTop() > 35){  
    $('.site-header').addClass("sticky");
  }
  else{
    $('.site-header').removeClass("sticky");
  }
});

Step = 2

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.site-header.sticky {
   position: fixed;
    width: 100%;
    z-index: 1;
    top: 0;
}

[Nico38]

thx @KetanKumar

it works, but i’m looking only for it to work when I scroll up and not when I scroll down

[KetanKumar]

@Nico38

do you mean like this?

https://codepen.io/kittenlane/pen/gPNVgd

[Nico38]

yes, i think @KetanKumar

where to insert the code for htlm ?

[KetanKumar]

@Nico38

not just HTML code

but can you try this script may work

remove first-script after this add

// Hide header on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();
    
    // Make scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    
    // If scrolled down and past the navbar, add class .nav-up.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('site-header').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('site-header');
        }
    }
  
    lastScrollTop = st;
}

[Nico38]

@KetanKumar

I replaced theme.js with the last one but it doesn’t work .

just my logo and shopping cart logo, customer logo and search logo just moving when scroll up.

to give you an idea, here is an store exemple when scroll up.

https://www.laboutiqueofficielle.com/

[KetanKumar]

It can be done by doing some code customization. please send me a personal message and we can discuss what you’d like

[Nico38]

@KetanKumar it work sorry, i’m an idiot !

but in collection page have a bug

[Nico38]

When i scroll up @KetanKumar

[KetanKumar]

@Nico38

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

[tharaka911]

Where should we put this code, can you tell us the location of the code?

[KetanKumar]

@tharaka911

are you able to shopify liquid code otherwise please don’t try it your can assign someone else or ,me

[leatheraholicx]

Hello @KetanKumar ,

I followed this guide for creating a sticky header and I chose Option 2: STICKY HEADER WITHOUT THE ANNOUNCEMENT BAR. I would like to have the announcement bar in the whole site but have it fade out when scrolling up. But, I face 2 issues in the process:

1. there is no “theme.scss.liquid” in my Asset folder, so I simply put the code to “theme.css”. I’m not sure if this is correct.

2. When I add the announcement bar, the header does not stick to the top anymore and appear like this.

I wish to make it like this site. Most grateful for your advice, please. Thanks!

Leatheraholicx