我們在日常瀏覽網(wǎng)頁的時候，會發(fā)現(xiàn)上面的導(dǎo)航欄一直保持不動，而下面的內(nèi)容會隨著滾動條的拖動而滑動，這個效果就是所謂的頂部吸附的效果。本文作者介紹了如何用Axure實現(xiàn)導(dǎo)航欄吸附效果的操作步驟，以及實現(xiàn)過程中的一些心得體會，與大家分享。

01 前期準備

軟件：Axure 9.0

硬件：Windows/Mac電腦

思考：實現(xiàn)吸附效果前的思考（可參考下圖）

02 教程

（1）制作PC頁面如下圖（本文以考拉海購為例）

（2）將頂部搜索區(qū)組合并命名，右鍵將組合設(shè)置為頂層，主要是為后續(xù)針對搜索區(qū)實現(xiàn)吸附效果。

（3）接下來，對頁面設(shè)置窗口滾動時的交互，這時候要考慮兩種情況：

1. 保證能夠正常滾動所有內(nèi)容
2. 固定搜索區(qū)內(nèi)容，只滾動下方內(nèi)容

（4）先確定好搜索區(qū)在你設(shè)置頁面的x，y的位置（我這里顯示的是x=79 ,y=171)

(5) 我們針對頁面選擇交互【窗口滾動時】，并添加情形1如下圖，意思就是當我們滾動的時候超過搜索區(qū)的高度，我們就執(zhí)行吸附效果的交互

（6）添加情形2如下圖，因為我們這里只有兩種情形，可以直接不添加條件，會默認設(shè)置為情形1的對立條件，該效果就是為了實現(xiàn)當頁面滾動回頂部的時候，讓搜索區(qū)回到它本來的位置上。
（7）再次將搜索區(qū)置于頂層，預(yù)覽查看吸附效果，反復(fù)調(diào)整，直到滿意為止，我們就做好了。

結(jié)語

這次我們用到的是窗口函數(shù)，有的同學(xué)可能會問，為什么不用動態(tài)面板，動態(tài)面板其實更適合廣告位等固定位置的滾動展示，比如一直保持在底部或者頂部。本次效果主要是為了讓大家更加熟悉窗口函數(shù)的使用。

本文由 @藍汐 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載！

題圖來自Unsplash，基于CC0協(xié)議