How do I make the header sticky on up-scroll on broadcast theme

How do I make the header sticky on up-scroll on broadcast theme

Hi Garett,

There is two way to do that

  1. with css
.shopify-section--header {
    position: -webkit-sticky;
    position: sticky;
}
  1. with js
//nav is the main div of header
// by adding and removing class you can style header as you want.
$(window).scroll(function(){
    if ($(window).scrollTop() >= 300) {
        $('nav').addClass('fixed-header');
        $('nav div').addClass('visible-title');
    }
    else {
        $('nav').removeClass('fixed-header');
        $('nav div').removeClass('visible-title');
    }
});

This doesnt seem to work unfortunately.

Send me your website urls. Let me have a look

Sent you a message with the information

Hi,

In theme.css line number 6883. if you add this code.
I put the black fade background on it, show it will visible while scroll. you can style it in different way.

What i originally am looking for it for the header to disappear when scrolling down and on up-scroll the header appears.

can you put the code here so i can copy paste it and see if it works?

Thank you :slightly_smiling_face:

Go it.
take this as a reference.
https://codepen.io/kaemak/pen/OJzWww