Axure教程:導航欄和廣告懸停效果制作
這篇文章,手把手教你如何用Axure做出:“任隨窗口滾動,而導航部分卡片保持不動,(即卡片始終懸停在指定的位置)”的效果。
如黃色框始終懸浮效果。
只需要一個事件:3個步驟。
第一步,做好導航菜單項部分,然后全選住,點擊右鍵”轉換為動態面板”,并在右側的元件命名處,命名為title。
第二步:做好下面的主體內容部分。(我用圖片占位符和矩形,隨意表示一下主體內容部分)
第三步:設置窗口滾動事件:
(1 ) 在頁面下的“頁面交互”選項卡下找到“窗口滾動時”事件。
(2)然后按照下圖中的數字順序1->2->3->4->5點擊選擇設置:
(移動—勾選動態面板title—-選擇“絕對位置到”)
點擊第二個fx(y坐標對應),彈出“編輯值”窗口。
點擊“插入變量”,選擇 ?Window.scrollY。
(變量框內容:刪除前面的0。最終效果是[[Window.scrollY]])
(變量框內容:刪除前面的0。最終效果是[[Window.scrollY]])
確定事件。
預覽或生成一下,就能看到你想要的效果,任你頁面內容有多長,title部分內容始終在上頭屹立不動。
這樣的方式還可以做到任意位置,如在頁面旁邊放廣告,只要你設置好絕對位置的y坐標軸,任你窗口如何滾動,小廣告始終安靜地懸掛在那里。
事件:窗口滾動時 移動 ?某個元件(內容生成的動態面板或小圖片)絕對位置到 y:fx ?。
設置 ?fx通常有以下幾種結果:
[[Window.scrollY]]
[[Window.scrollY+200]] ( 200為舉例,坐標根據實際情況定)。
下面試試做個右側懸浮不動的小廣告吧~~~
本文由 @beikehuahua?原創發布于人人都是產品經理?,未經許可,禁止轉載。
評論
很實用,感謝。
有個小問題,向上滾動頁面時,已經固定的小廣告,沒有回到原來位置,停留在其他元件后面,怎么辦呢
Axure8.0中我沒找到當窗口滾動時這個交互事件
設置的是[[Window.scrollY+30]]
大神 這個加上之后,會和頁面頂端同樣保持30PX 如何消除這30PX間隙
現在在用固定到瀏覽器功能,以后用到再來學習~~~總之先收藏了~謝謝作者
親們,剛剛那篇教你們做鼠標指針截獲跟隨的文章,聽一個讀者的建議,正在修改bug,更新完需要兩個小時后,才會顯示出來~~~~快周末了,我周六日有空的話,再給你們整個系統而實用的文章哈 ?? ~~~
求源文件
做了一個固定導航沒有問題,加了一個固定廣告就有問題了~是因為做了2個有沖突嗎?
固定廣告同樣的處理,我試了沒有問題
不會的親,可能你沒有選絕對位置吧?比如你想在網頁右上角(950,150)坐標處掛個小廣告,可以緊跟窗口滾動事件“移動 title 到絕對位置:(0,[[Window.ScrollY]]),
再設置: 移動 廣告內容 到絕對位置 (950,[[Window.ScrollY+150]]),掛幾個都是絕對沒問題的。
注意哦,1,絕對位置, 不是相對位置 2,Window.ScrollY,不是Window.ScrollX
謝謝大家的提醒,互相學習啦,今天晚上,我會發一篇更有用的,我做產品經理兩年了,由于公司產品要對客戶負責,不敢亂往外發布東西,所以,我只發布和操作技巧有關的實用的東西,不露產品原型和UI原頁~~~,但發的東西肯定是有用的~~~ ??
請問如何設置當窗口滾動到特點的位置時,在將標簽導航置頂呈現
用接觸線,接觸時顯示標題并置頂,不接觸時隱藏標題;我最近的一個版本里面有表格,表格的行數比較多,我希望滑動到下面時自動把表格的標題欄置頂顯示,就用的這個方法;
謝謝!
如果想在導航上做一個登陸的按鈕,然后登陸上去之后會顯示昵稱,怎么樣設置讓登陸之后的昵稱在每個頁面都顯示呢?
我現在只能是讓導航在每個不同的頁面上都登錄一次
非常實用,關鍵今天剛好用上,做了個懸浮菜單,多謝分享!
親,我學習了,還有哦,這個坐標設置好,能在任意位置設置廣告卡片的~~~
一種不同的思路,也行可以用到不能用“固定到瀏覽器”的情況下,謝謝分享! ??
互相學習啦,還可以把某個元件固定到任意你想要的位置的:如窗口滾動時 移動 某個元件(內容生成的動態面板或小圖片)絕對位置到 x坐標定好x設置為950,y設置為[[Window.Scroll+450]] 那么無論你的窗口如何滾動,元件始終在,(950,450)
少了個字母Y,[[Window.ScrollY+450]]
轉化為動態面板之后,直接右鍵選擇“固定到瀏覽器”會不會方便點? ??
我試過的親,但是窗口內容特別長的時候,一滾動,好像它就沒了,不知道是不是我的默認瀏覽器的原因~~ : ?