How do I achieve the effect of the sub nav on this Apple Website

I'm trying to achieve the sticky behaviour on this site https://www.apple.com/apple-card/ Where the Sub Nav overlaps with the first's section's content, and sticks to the top of the screen on scroll. Here's a codepen with my attempt. https://codepen.io/HanielU/pen/zYyEVYW Any help with this would be much appreciated, I've been stuck on this for a bit over a week and starting to lose my mind
Apple
Apple Card
Apple Card offers up to 3% Daily Cash back on purchases with no fees. Apply with no impact to your credit score to see if you’re approved. Terms apply.
10 Replies
Joao
Joao14mo ago
This uses JavaScript, something called Intersection Observer. There are a few videos on YT, I think even Kevin made one about it and how to use it.
hyprsonic
hyprsonic14mo ago
I'm not referring to the backdrop blur on scroll If that's what you're talking about I'll be happy if it just sticks to the top of the screen
Joao
Joao14mo ago
Yes, but the problem is that you have another element before that so you cannot just stick it at the top. So you want to trigger that effect when you scroll downwards, and this needs to be done with JavaScript. If you go to the Apple site and disable JavaScript you'll see it doesn't work anymore.
hyprsonic
hyprsonic14mo ago
interesting
Joao
Joao14mo ago
You can use an event listener as well and for this particular example I think that's probably best. Since it happens at the very top of the document so it's predictable. Intersection Observer is more useful when you don't know exactly where an element is positioned.
hyprsonic
hyprsonic14mo ago
I don't even know what's going on on scroll What exactly is happening to the nav element?
Joao
Joao14mo ago
I would do it like this. First, do not apply any styles related to the position of the element that you want to make sticky. Declare a separate style that does apply that effect. Next, some simple JavaScript that runs on scroll, checking how far down the page you are. If you are at 0 that means the top, so remove that class. Otherwise, you are not at the top so apply it.
No description
Joao
Joao14mo ago
You'll notice if you scroll with the mouse that it's a very sudden transition which is probably why in Apple's page they also apply that blurriness effect.
hyprsonic
hyprsonic14mo ago
Isn't this the exact same as having the sticky applied from the start? Thanks anyway, you've helped a lot!
Joao
Joao14mo ago
It's the same principle yes, the idea here is that you can adjust when to trigger it.
Want results from more Discord servers?
Add your server