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
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.
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
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.
interesting
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.
I don't even know what's going on on scroll
What exactly is happening to the nav element?
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.
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.
Isn't this the exact same as having the sticky applied from the start?
Thanks anyway, you've helped a lot!
It's the same principle yes, the idea here is that you can adjust when to trigger it.