How can I make header translucent only when I'm using (sticky header on scroll up)

ATTAR-DE-ROYALE · ‎09-24-2024

Hi there guys I'm having a slight issue with my code. I want to have my header set as sticky header setting (on scroll up). I want the header to be on 0.75 opacity when scrolling up only. so when I scroll up my header pops up but the opacity to be at 75%. I want to be able to have opacity at 100% when I load the page and when I scroll down I want header to disappear and when I scroll partially up the header to be translucent. If anyone could help with this I would greatly appreciate the help. Thank you very much for your time everyone.

Dan-From-Ryviu · ‎09-24-2024

Hi @ATTAR-DE-ROYALE

Could you share your store URL so I could check?

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎09-26-2024

Please add this code to theme.liquid file, after <head>

<style>
.scrolled-past-header .header-wrapper { background: #000000bf; }
</style>

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

juanidi · ‎09-24-2024

Hi @ATTAR-DE-ROYALE

If you want some manual styles and javascript,

look at below codes.

HTML:

<header id="header" style="opacity: 1;">
    <h1>Your Header</h1>
</header>

CSS:

#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: white; /* Change as needed */
    transition: opacity 0.3s ease, top 0.3s ease;
    opacity: 1; /* Start at 100% opacity */
    z-index: 1000; /* Ensure it's above other elements */
}

Javascript code in `custom.js`

document.addEventListener('DOMContentLoaded', function() {
    let lastScrollTop = 0;
    const header = document.getElementById('header');

    window.addEventListener('scroll', function() {
        const currentScroll = window.pageYOffset || document.documentElement.scrollTop;

        // Check if scrolling down
        if (currentScroll > lastScrollTop) {
            // Scrolling down
            header.classList.add('hidden');
        } else {
            // Scrolling up
            header.classList.remove('hidden');
            // Set opacity to 0.75 when scrolling up
            header.style.opacity = '0.75';
        }

        // Update last scroll position
        lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // For Mobile or negative scrolling
    });

    // Reset opacity when the page loads
    window.addEventListener('load', function() {
        header.style.opacity = '1';
    });
});

And add this line `<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>` for adding the javascript code.

Hope this code fixes your issue.

ATTAR-DE-ROYALE · ‎09-26-2024

where should I paste the CCS code. into the theme liquid file or as a custom CSS on the header editing page

Dan-From-Ryviu · ‎09-24-2024

Hi @ATTAR-DE-ROYALE

Could you share your store URL so I could check?

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

ATTAR-DE-ROYALE · ‎09-26-2024

https://www.attarderoyale.com

ATTAR-DE-ROYALE · ‎09-26-2024

is there any way you can make it like blurry when scrolling up.so that when I scroll up the background is transparent and blurry. like the image I have provided. So when you load the page the banner is solid black with my logo on it but when use the page and I scroll up the header background is transparent but blurry like the image.

the web link is : https://www.attarderoyale.com

pass:ADRLTD

Dan-From-Ryviu · ‎09-26-2024

Please add this code to theme.liquid file, after <head>

<style>
.scrolled-past-header .header-wrapper { background: #000000bf; }
</style>

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

ATTAR-DE-ROYALE · ‎09-26-2024

to add blur to it would I need to add the blur (5px) incite the background or outside background :

ATTAR-DE-ROYALE · ‎09-26-2024

I Have added the blur myself I would like for the side menu bar to follow the same blur effect and also add some blur to the yellow section on the side of the open drop down menu

How can I make header translucent only when I'm using (sticky header on scroll up)

How can I make header translucent only when I'm using (sticky header on scroll up)

Community Blog Articles