【axure】axure实现导航栏吸附与锚点滚动效果

大多数网站都有导航吸附效果，即导航栏固定在网页顶部，不随鼠标滚动而移动；还有就是锚点滚动效果，即点击某个按钮，页面直接滚动到相应内容区域。今天就写一下如何使用axure实现导航吸附与锚点滚动效果，tips:这里的重点元件是动态面板哦，大家可以留意一下~话不多说，先上效果图，如下：

具体步骤：

1.制作导航栏：在编辑区域拖入一个矩形作为导航栏背景，再拖入一个占位符、三个文本作为logo图片与导航按钮；为了保证导航栏在浏览器中为铺满效果，需为矩形背景设置onload事件，内容为：set size->window.width，同时为了保证logo图片与三个导航按钮的位置正确，需将其分别转换为动态面板并设置固定到浏览器，即：pin to brower ,如果对这部分内容有疑问，可以查看上篇文章《axure母版搭建Web后台基本框架》；同时可为三个导航按钮设置鼠标移入、鼠标按下、选中样式~导航栏效果如下：

2.设置导航栏吸附效果：将第一步中的所有元件全部选中，并转换为动态面板；然后右键选择固定到浏览器pin to brower即可，是不是很简单~到这里第一个效果就完成啦！

3.制作内容区域：在导航栏下方拖入一个动态面板，命名为content1，面板高度根据需要设置;在content1的state1中再拖入一个动态面板，命名为content2，面板高度根据需要设置，一般content2高度要大于content1；在content2面板的state1中拖入一个矩形，矩形中放三行文本，分别表示导航栏三个按钮指向的三个位置，如下图所示：

这里需要特别记录第二行和第三行文本的y坐标，“视频”文本对应的y坐标为500，"发现"文本对应的y坐标为860，第四步会用到。此时内容区域各元件对应的层级关系如下所示：

4.设置锚点滚动效果：选中导航按钮“首页”，为其添加onclick事件，内容为：move content2 to (0,0) & set selected，如下图所示：

同理，选中导航按钮“视频”，为其添加onclick事件，内容为：move content2 to (0,-500) & set selected，这里注意-500即为第3步中“视频”文字对应的y坐标~

同理，选中导航按钮“发现”，为其添加onclick事件，内容为：move content2 to (0,-860) & set selected。

为了使这三个导航按钮只能有一个出现被选中效果，需要选中这三个按钮并设置为选项组~设置选项组具体方法如果有疑问可查看上篇文章《axure母版搭建Web后台基本框架》。

全文结束，over~