中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

01 前期準(zhǔn)備

軟件：Axure 9.0

硬件：Windows/Mac電腦

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

02 教程

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

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

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

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

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

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

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

結(jié)語

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

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

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