Question

所以我看过这个网站：http://unfold.no/ 我想学习如何构建既透明又可以根据背景改变颜色的导航栏（如果向上或向下滚动，你会看到它）。我对导航条的经验有限，可以追溯到旧的Dreamweaver版本，所以请原谅我的问题的一般性......任何建议从哪里开始都将受到赞赏。

Answer 1

我想你的问题可以通过阅读这个问题的答案来解决：

Changing classes with animation depending on scroll position

基本上，在您显示的示例中，菜单在页面上有一个position: absolute，它将其定位在页面的右上角。然后，更改菜单的颜色的简单方法是通过Javascript在菜单本身上交换类。您可以使用上面链接中显示的代码来了解如何完成此操作。

通过使用动画交换关于元素 colors 的类，然后为每个元素提供一个CSS transition，如下所示：

.object{
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

此CSS会使动画持续时间为 0.5 秒，使您的元素更改颜色。

如果你对 CSS和Javascript

有基本的了解，这很简单

如何制作这个悬停的导航栏

1 个答案: