How do I make the header sticky on up-scroll on broadcast theme
Hi Garett,
There is two way to do that
- with css
.shopify-section--header {
position: -webkit-sticky;
position: sticky;
}
- 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 ![]()
Go it.
take this as a reference.
https://codepen.io/kaemak/pen/OJzWww

