This document addresses the challenges faced by local users learning Framer due to the lack of Korean resources. We translated the content from the official blog into Korean and included useful practical information. We hope this provides some help to Framer users.

Subscribe to the Framer YouTube channel.

Looking for ways to make your website's navigation more intuitive and accessible? Consider implementing a floating navigation bar that appears when you scroll. In this tutorial, we'll walk you through creating a navigation bar that appears as soon as the user starts scrolling and remains until the end of the page.

Setting Up the Project

Before starting, set up your project. Fix the standard navigation to the top of the page, and create a separate floating navigation. Set the floating navigation's position to fixed, and position it 20 pixels from the top, left, and right.

Defining the Scroll Section

To determine when the floating navigation appears, define the scroll section. Add a scroll section to the hero section and name it “hero.” Select the floating navigation, add a scroll animation, set the trigger to section in view, and specify the hero section. When the hero section reaches the top of the viewport, the animation will execute.

Customizing the Animation

Next, customize the animation for the floating navigation. Set opacity to 1 and scale to 1. Simultaneously, set the Y value to -110 so that the navigation moves out of the screen. This ensures that when you preview, the navigation appears seamlessly as you scroll down.

Fixing Disappearing Navigation Issue

Sometimes, the navigation may disappear when the hero section leaves the viewport. In such cases, unlock the enter and exit transitions of the scroll animation and remove the exit animation to resolve the issue.

Adding Offset

Finally, add an offset to trigger the animation slightly earlier. By setting the Y offset to 10 pixels in the hero section, the animation will activate 10 pixels before the hero section touches the top of the viewport.

Conclusion

Floating navigation appearing on scroll in Framer is a simple and effective way to enhance user experience and improve navigation accessibility. By following this process, anyone can make their website navigation more intuitive.

Watch an example and follow along →

This article adapts and translates content from the Framer official blog 'Advanced scroll-triggered navigation: implementation guide for UX designers'.