Jump to content

Fixed header opacity change on scroll

Go to solution Solved by Ziggy,

Recommended Posts

Hey all! 

I have a fixed scroll header in place, with the solid style. 

 

I would like to basically change that solid opacity on scroll, so once we've scrolled on the page the header stays fixed but the opacity of it changes as to not disrupt the content in the background. 

Thanks in advance! 

Link to comment

Can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

If you set the header to dynamic, and then use this Custom CSS:

#header {
  background-color: transparent;
}
.header-announcement-bar-wrapper {
  background-color: rgba(255,255,255,.66)!important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Hey, thank you for this! Unfortunately it doesn't give me the desired effect. 

It makes the whole header become a little translucent, even from the top, when I want it to be solid and then on scroll have like a 50% opacity. 

 

Also another issue i'm having is that when I change the colour code to the darkest colour on my site 

rgba(28,28,27,1.000)

it just turns into a solid header and the code seems to stop working (so the blur doesn't work etc)

Link to comment
  • Solution

rgba(28,28,27,1.000) is a solid colour.

The last number is 1.0 which means 100% opacity. In the code I gave you it was using 0.66 (66%), try changing that number to this:

rgba(28, 28, 27, 0.66)

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 6 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.