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

Shopify Discussion
1

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

2

Hi @MaiaMonange

Please update this code

{% if template.name == "index" %}

{% endif %}

To this

{% if template.name == "index" %}

{% endif %}
3

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" %}

{% endif %}
  1. 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.

  • 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

4

Worked perfect, ty boss

5

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