大多數(shù)網(wǎng)站都有導(dǎo)航吸附效果，即導(dǎo)航欄固定在網(wǎng)頁頂部，不隨鼠標(biāo)滾動(dòng)而移動(dòng)；還有就是錨點(diǎn)滾動(dòng)效果，即點(diǎn)擊某個(gè)按鈕，頁面直接滾動(dòng)到相應(yīng)內(nèi)容區(qū)域。今天就寫一下如何使用axure實(shí)現(xiàn)導(dǎo)航吸附與錨點(diǎn)滾動(dòng)效果，tips:這里的重點(diǎn)元件是動(dòng)態(tài)面板哦，大家可以留意一下~話不多說，先上效果圖，如下：

具體步驟：

1.制作導(dǎo)航欄：在編輯區(qū)域拖入一個(gè)矩形作為導(dǎo)航欄背景，再拖入一個(gè)占位符、三個(gè)文本作為logo圖片與導(dǎo)航按鈕；為了保證導(dǎo)航欄在瀏覽器中為鋪滿效果，需為矩形背景設(shè)置onload事件，內(nèi)容為：set size->window.width，同時(shí)為了保證logo圖片與三個(gè)導(dǎo)航按鈕的位置正確，需將其分別轉(zhuǎn)換為動(dòng)態(tài)面板并設(shè)置固定到瀏覽器，即：pin to brower ,如果對(duì)這部分內(nèi)容有疑問，可以查看上篇文章《axure母版搭建Web后臺(tái)基本框架》；同時(shí)可為三個(gè)導(dǎo)航按鈕設(shè)置鼠標(biāo)移入、鼠標(biāo)按下、選中樣式~導(dǎo)航欄效果如下：

2.設(shè)置導(dǎo)航欄吸附效果：將第一步中的所有元件全部選中，并轉(zhuǎn)換為動(dòng)態(tài)面板；然后右鍵選擇固定到瀏覽器pin to brower即可，是不是很簡(jiǎn)單~到這里第一個(gè)效果就完成啦！

3.制作內(nèi)容區(qū)域：在導(dǎo)航欄下方拖入一個(gè)動(dòng)態(tài)面板，命名為content1，面板高度根據(jù)需要設(shè)置;在content1的state1中再拖入一個(gè)動(dòng)態(tài)面板，命名為content2，面板高度根據(jù)需要設(shè)置，一般content2高度要大于content1；在content2面板的state1中拖入一個(gè)矩形，矩形中放三行文本，分別表示導(dǎo)航欄三個(gè)按鈕指向的三個(gè)位置，如下圖所示：

這里需要特別記錄第二行和第三行文本的y坐標(biāo)，“視頻”文本對(duì)應(yīng)的y坐標(biāo)為500，"發(fā)現(xiàn)"文本對(duì)應(yīng)的y坐標(biāo)為860，第四步會(huì)用到。此時(shí)內(nèi)容區(qū)域各元件對(duì)應(yīng)的層級(jí)關(guān)系如下所示：

4.設(shè)置錨點(diǎn)滾動(dòng)效果：選中導(dǎo)航按鈕“首頁”，為其添加onclick事件，內(nèi)容為：move content2 to (0,0) & set selected，如下圖所示：

同理，選中導(dǎo)航按鈕“視頻”，為其添加onclick事件，內(nèi)容為：move content2 to (0,-500) & set selected，這里注意-500即為第3步中“視頻”文字對(duì)應(yīng)的y坐標(biāo)~

同理，選中導(dǎo)航按鈕“發(fā)現(xiàn)”，為其添加onclick事件，內(nèi)容為：move content2 to (0,-860) & set selected。

為了使這三個(gè)導(dǎo)航按鈕只能有一個(gè)出現(xiàn)被選中效果，需要選中這三個(gè)按鈕并設(shè)置為選項(xiàng)組~設(shè)置選項(xiàng)組具體方法如果有疑問可查看上篇文章《axure母版搭建Web后臺(tái)基本框架》。

全文結(jié)束，over~