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.
If you want some manual styles and javascript,
look at below codes.
HTML:
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.
1 Like
Could you share your store URL so I could check?
where should I paste the CCS code. into the theme liquid file or as a custom CSS on the header editing page
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
to add blur to it would I need to add the blur (5px) incite the background or outside background :
