How do I make my banner fade back in on scroll up?

[MaiaMonange]

I wanted to make my banner transparent with a fade in/fade out effect when a user scrolls up/down. I was able to get it transparent with a fade in animation on scroll down, but when i scroll back up it doesn't fade out, it just pops back to being transparent.

*If there's a better way of doing this please let me know, I have 0 coding knowledge*

Here's the code I used in my theme.liquid file,

**Transparent banner**


{% if template.name == "index" %}
<style>
.header-wrapper {
position: absolute !important;
width: 100% !important;
background: transparent;
}
</style>
{% endif %}





**Fade in/out animation**


<style>
{% unless template.name == 'index' %}
.header__menu-item,.header__icon{color:Black !important}
{% endunless %}

.scrolled-past-header .header-wrapper {
background: white !important;
}
.scrolled-past-header * {
transition: background 0.3s ease-in-out;
}
</style>

website - maiamonange.com

[Dan-From-Ryviu]

Hi @MaiaMonange 

Please update this code 

{% if template.name == "index" %}
<style>
.header-wrapper {
position: absolute !important;
width: 100% !important;
background: transparent;
}
</style>
{% endif %}

To this 

{% if template.name == "index" %}
<style>
.header-wrapper {
position: absolute !important;
width: 100% !important;
background: transparent;
transition: background 0.3s ease-in-out;
}
</style>
{% endif %}

[rajweb · Accepted solution]

Hey @MaiaMonange ,

It seems like you're partway there, but the issue lies in how the fade-out effect is being applied when scrolling back up. Below is a corrected and improved version of your implementation. Additionally, I'll include a JavaScript snippet to ensure the fade-out effect works smoothly when scrolling up.

Updated Code:

1. Transparent Banner (HTML/CSS):

Keep the transparency and style applied to the banner as you already have it. Minor adjustments are included.

{% if template.name == "index" %}
<style>
    .header-wrapper {
        position: absolute !important;
        width: 100% !important;
        background: transparent;
        transition: background 0.3s ease-in-out;
    }
    .scrolled-past-header .header-wrapper {
        background: white !important; /* Adjust color as needed */
    }
    .header-wrapper * {
        transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    }
</style>
{% endif %}

2. Fade In/Out Animation (JavaScript):

This script toggles a class when the user scrolls down or up, adding the fade-in and fade-out behavior dynamically.

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const header = document.querySelector('.header-wrapper');
        let lastScrollY = 0;

        window.addEventListener('scroll', function() {
            const currentScrollY = window.scrollY;

            if (currentScrollY > lastScrollY) {
                // User is scrolling down
                header.classList.add('scrolled-past-header');
            } else if (currentScrollY <= 50) {
                // User is at the top or scrolling up near the top
                header.classList.remove('scrolled-past-header');
            }
            
            lastScrollY = currentScrollY;
        });
    });
</script>

- This code works best if the .header-wrapper is present and contains all header-related elements.

- Ensure that the header-wrapper class matches the structure of your theme.

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat

[MaiaMonange]

Worked perfect, ty boss

[rajweb]

You're most welcome! Glad it worked perfectly for you. 🚀 If you need help with anything else, feel free to ask. Happy coding and best of luck with your Shopify store! 😄