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

Shopify Discussion

Topic summary

A Shopify store owner sought help implementing a fade-in/fade-out effect for their transparent banner during scrolling. The banner would fade in when scrolling down but abruptly reappeared (instead of fading out) when scrolling back up.

Initial Approach:

  • Used CSS in theme.liquid to make the banner transparent on the homepage
  • Applied a fade-in transition using the .scrolled-past-header class
  • Lacked proper fade-out functionality when scrolling up

Solution Provided:
A community member (rajweb) offered a complete fix involving:

  • Updated CSS with proper transition properties for both fade-in and fade-out effects
  • JavaScript code to dynamically add/remove the scrolled-past-header class based on scroll position (threshold set at 100px)
  • The script monitors scroll direction and applies smooth transitions in both directions

Outcome:
The solution was successfully implemented and resolved the issue. The banner now properly fades in when scrolling down and fades out when scrolling back up.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
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

1 Like
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

1 Like
4

Worked perfect, ty boss

1 Like
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:

1 Like