Making header non-transparent when scrolling down/at the bottom of the home page

ym1999 · ‎04-13-2023

Please see the following store using the Dawn theme: https://et-tani.myshopify.com/ (password is YMStore)

I have added the following code to base.css to make it transparent:

.homepage .header--middle-center {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: transparent;
z-index: 9999;
transition: background-color 0.3s ease;
}

.homepage .header--middle-center.scrolled {
background-color: rgba(255, 255, 255, 0.8);
}

I then added the following code to theme.editor.js:

// Custom sticky header script
document.addEventListener('DOMContentLoaded', function() {
if (document.body.classList.contains('homepage')) {
const header = document.querySelector('.header--middle-center');
const checkScroll = () => {
if (window.scrollY > 10) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
};

checkScroll();
window.addEventListener('scroll', checkScroll);
}
});

The intention is to make it so that when I scroll down on the home page, the header becomes non-transparent and goes back to normal, but is transparent as/when I scroll up.

I modified the opening body tag in theme.liquid to ensure this only takes place on the home page:
{% if template.name == 'index' %}
<body class="template-{{ template.name | escape }} homepage">
{% else %}
<body class="template-{{ template.name | escape }}">
{% endif %}

Can someone tell me how to make the header non-transparent/normal at the bottom?

Thanks

ym1999 · ‎04-13-2023

actually I've managed it but the non-transparent header isn't covering the entire length of the header position-anyone know why?

View solution in original post

ym1999 · ‎04-13-2023

actually I've managed it but the non-transparent header isn't covering the entire length of the header position-anyone know why?

Making header non-transparent when scrolling down/at the bottom of the home page

Making header non-transparent when scrolling down/at the bottom of the home page

Community Blog Articles