如何使用类似于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

正如您所看到的，使用此插件可以轻松获得滚动位置，因此您可以将菜单下的三角形放置在正确的位置。

要为三角形设置动画，您只需要一些基本的tween动画。 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);

希望这会对你有帮助！