如何使用类似于 Chart.io 和 simple.com 的 smoothscroll 窗格创建动画菜单

Question

我正在尝试创建一个 1 页网站，顶部有一个与 Chart.io 或 simple.com 类似风格的菜单，有人能给我指点一个好的教程吗？我已经使用谷歌进行了搜索，但我还没有找到任何可以实现我想要做的事情的东西。

我目前使用 Mootools 平滑滚动进行滚动，但是我在为菜单项下的元素设置动画时遇到问题。

非常感谢任何和所有的帮助......

Answer 1

开始使用 CSS 固定标题菜单：

#header {
    position: fixed;
    top: 0;
    left: 0;
}

然后你可以使用像这样的 Mootools 插件：

http://davidwalsh.name/mootools-scrollspy
演示： http://davidwalsh.name/dw-content/scroll-spy .php?page=3

正如你所看到的，使用这个插件你可以轻松获取滚动位置，这样你就可以将菜单下的三角形放置在正确的位置。

要为三角形设置动画，您只需要一些基本的补间动画。 HTML 将会是这样的：

<div id="header">
    Your header here
    <div id="triangle">
        <img src="triangle.png" alt="">
    </div>
</div>

CSS:

#header #triangle {
    position: absolute;
    bottom: 0;
    left: 0;
}

Mootools tween 用于动画，这会将三角形从当前位置平滑地移动到左侧 300px：

$('triangle').tween('left', 300);

希望这会对您有所帮助！