如何创建一个动画菜单，平滑滚动窗格类似于chart.io和simple.com

Question

我正在尝试创建一个1页面的网站，它有一个类似于chart.io或简单样式的菜单。 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动画，这会从左侧平滑地从它的当前位置移动的三角形300像素：

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

希望这会帮助你！