I have enabled the sticky header but it is only sticky when we scrolls up.. is there a way to enable sticky header even if we scroll down
Hey @Joshua2612
Yes, it is possible to make a header sticky even when scrolling down. By default, CSS ‘position: sticky’ makes an element sticky only when scrolling up. To make it sticky in both directions, you can use a combination of CSS and JavaScript.
Here’s an example of how you can achieve this:
HTML:
CSS (styles.css):
#sticky-header {
position: sticky;
top: 0;
}
JavaScript (script.js):
// Get the sticky header element
var header = document.getElementById("sticky-header");
// Get the initial offset position of the header
var headerOffset = header.offsetTop;
// Function to add or remove "sticky" class based on scroll position
function handleScroll() {
if (window.pageYOffset > headerOffset) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
// Attach scroll event listener
window.addEventListener("scroll", handleScroll);
In the CSS code, we set the position of the header element to sticky and top to 0 to ensure it sticks to the top of the viewport.
In the JavaScript code, we get a reference to the header element using its ID. Then, we store the initial offset position of the header in the headerOffset variable. Finally, we attach a scroll event listener to the window and call the handleScroll function, which adds or removes the sticky class from the header based on the scroll position.
With this setup, the header will become sticky once you scroll past its initial position and remain sticky regardless of the scrolling direction.
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
where should I paste the codes ya?
This is just an example of how you can make the sticky header work by scrolling down. You’ll have to make changes in the code if you’re familiar with coding.
If you’re not familiar with coding then I suggest you to hire a Shopify developer who can do this task for you.
If I managed to help you, then don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
@Joshua2612 choose always sticky header option
from customize-> Header-> Sticky header
if this option isn’t available then share your store url.
I am using Dawn 2.4 version. the option not available