您是否正在寻找一种让您的网站导航更易于访问和用户友好的方法？滚动时浮动导航正是您所需要的！在本教程中，我们将向您展示如何创建一个浮动导航，它会在您开始向下滚动页面时立即出现，并一直停留在页面上直到底部。

项目设置

在开始之前，请使用固定在页面顶部的常规导航和浮动导航来设置您的项目。浮动导航应固定定位并在顶部、左侧和右侧距离 20 像素。

定义滚动部分

为了使浮动导航出现，我们需要定义它何时使用滚动部分进行动画。为英雄部分添加一个滚动部分并将其命名为“hero”。选择浮动导航后，添加滚动动画效果，并将触发器设置为英雄部分的“部分进入视图”。将视口设置为“顶部”，以便动画在英雄部分接触视口顶部时立即触发。

自定义动画

接下来，为浮动导航设置自定义动画，不透明度为 1，比例为 1。通过将 Y 设置为 -110 将导航移出视口。预览动画并查看它在您向下滚动时是否有效。

修复消失的导航

您可能会遇到的一个问题是，当英雄部分不再处于视口中时，浮动导航会消失。要解决此问题，请解锁滚动动画中的进入和退出过渡，并删除退出动画。

添加偏移量

最后，为英雄部分添加一个偏移量，使动画稍早触发。将 Y 偏移量设置为 10 像素，以便动画在英雄部分接触视口顶部之前 10 像素处触发。

结论

在 Framer 中创建滚动时浮动导航是改善用户体验和使导航更易于访问的简单有效方法。通过这些简单的步骤，您可以自定义您的网站导航并使其更用户友好。