I have a sub-nav with anchor links that have an active state. i want the active state to be triggered when the anchor section reaches the bottom of the sub-nav (see here). currently it triggers when the section is halfway down the page. how do i do this? the bottom of the subnav is offset 15rem from the top of the page
Here is my site Read-Only: Webflow - Copy of Client First v2.2
Here is my site staging link: https://client-first-v2-2-b56fbe-47fd31c26f657e.webflow.io/
Hi there,
While there isn’t a direct setting to adjust the trigger point for anchor link active states in relation to a sub-nav’s position, you can achieve this functionality using custom code. One approach is to use JavaScript to create custom scroll-based triggers. You can also explore using Webflow’s native scroll-based animations combined with interaction triggers to create a similar effect.
For a basic implementation, you might want to consider using the ScrollTrigger feature in the Interactions panel, which allows you to create scroll-based animations that could simulate the behavior you’re looking for.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
that isn’t helpful
.
Hey @merino,
I was taking a look at your site and the sub-nav accurately highlights the anchor link only when the section reaches the bottom of the sub-nav. So it likely means this issue is occurring with the larger screens.
You could probably add larger breakpoints in the designer to let you understand what kind of padding / margin offset is required to make sure that larger screens offer the same behavior. Although, it might make your design look a bit weird in terms of additional space.
So you could alternatively try adding element interaction trigger as suggested above, like ‘Scrolling into view’ for the sections and and try exploring with it to see what works for your particular design.