• <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
  • <pre id="gvoe3"></pre>
    <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

  • <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">
      axure商城

      頁面向下滾動時導航頂部吸附效果

      本文轉載自小樓老師博客:http://www.iaxure.com/3465.html

      頁面向下滾動時導航頂部吸附效果,這是無論在Web端還是移動端都有一種效果。

      頁面頂部是宣傳圖片,圖片下方是導航菜單,當瀏覽器窗口滾動條向下拉動或鼠標滾輪向下滾動時(移動端為手指向上滑動屏幕),一旦瀏覽器窗口頂部邊緣超過導航菜單的位置,導航菜單開始固定在瀏覽器頂部邊緣的位置,不再隨頁面向上移動。(圖1)

      效果動畫:

      0

      (圖1)

      說到這個效果,我想起有人問過:Axure有必要學函數嗎?搞那么復雜有必要嗎?

      那么,大家在看后面的內容之前,先思考一下。這個效果怎么實現?

      ————————————我是風騷的分割線——————————————-

      回答上面的提問:這個效果只有通過函數才能簡潔正確的實現。

      分析一下這個效果的過程:

      1、交互什么時候觸發?

      答:瀏覽器窗口滾動的時候。

      2、分別有幾種情形?

      答:兩種情形,一種是超過指定的距離,一種是未超過指定的距離。

      3、需要判斷什么內容?

      答:需要判斷瀏覽器窗口滾動的距離。

      4、瀏覽器窗口的滾動距離怎么獲???

      答:通過函數“Window.scrollY”。

      好了,分析完畢,下面是實現過程。

      1、先準備元件。(圖2)

      01

      (圖2)

      • 頂部是輪播圖片,這個效果在我的網站、視頻、書籍(圖里的那個),都能夠找到,在此不做講解。
      • 圖片下面是導航菜單。因為導航菜單要統一移動,所以可以放入幾個矩形作為菜單項,然后全選,點擊鼠標右鍵,在菜單里選擇【轉換為動態面板】,這個動態面板命名為“menu”。之后,我們在交互中移動動態面板就能夠移動所有菜單項了。這里需要注意的是,動態面板要置于頂層,以免頁面內容滾動時覆蓋導航菜單。還有就是幾下動態面板的y軸坐標,一會兒交互中要用到。
      • 導航菜單下面是頁面的內容,這個案例只是放了一些文本標簽和文本段落,表示文章內容。這里要注意的是內容一定要足夠多,只有內容高度超過瀏覽器窗口高度時,才能夠進行滾動瀏覽。

      2、添加交互。

      • 瀏覽器窗口滾動的事件,在軟件中下部的【頁面交互】中設置。雙擊【窗口滾動時】的事件名稱,打開用力編輯。額…用例編輯。(圖3)

      02

      (圖3)

      • ?第一種情形(Case 1)? ,我們需要先完成滾動超過指定的距離時的交互,這里需要進行對滾動距離的判斷。在用例編輯窗口,點擊【編輯條件】,判斷窗口的滾動距離是否大于240。

      04

      (圖4)

      • 當滿足上述條件時,【移動】動態面板“menu”【到達】x軸“0”y軸“[[Window.scrollY]]”的位置?!癧[Window.scrollY]]”就是窗口當前滾動的距離,也就是瀏覽器窗口上邊緣在頁面中的位置。在瀏覽器窗口滾動時,將動態面板“menu”移動到這個位置,就是將它時時移動到瀏覽器窗口的上邊緣的位置,也就是頂部吸附效果。(圖5)

      04

      (圖5)

      • 完成了第一種情形后,再次雙擊事件名稱或者點擊添加用例,編輯第二種情形。軟件這個時候會自動給出【Else If True】,表示否則的情況;在用例編輯中我們設置【移動】動態面板“menu”【到達】x軸“0”y軸“240”的位置,也就是回到初始位置。(圖3)
      • 最后,大家可能還有一個疑問,就是“[[Window.scrollY]]”從何而來?其實,函數是可以直接輸入使用的,如果記不住單詞,也可以點擊界面中的“fx”(圖4與圖5中箭頭指向位置),在打開的窗口中點擊【插入變量或者函數…】,通過選擇來完成輸入。(圖6)

      05

      (圖6)

      以上就是導航菜單頂部吸附效果實現的分析與過程。大家不難發現,其實使用函數并不復雜,關鍵在與知道函數的用途與使用方法。

      所以,原型中使用函數,旨在解決問題和提高效率,不要為了使用而使用,也不要對其有偏見而放棄使用。

      源文件下載鏈接:http://pan.baidu.com/s/1skcYcQp

      給TA買糖
      共{{data.count}}人
      人已贊賞
      高級教程

      Axure高保真還原Web首頁布局和交互教程

      2016-4-8 17:59:37

      高級教程

      Axure訂閱付費如何取消?Axure信用卡自動扣款解決辦法

      2016-5-20 22:22:19

      axure商城
      0 條回復 A文章作者 M管理員
        暫無討論,說說你的看法吧
      ?
      個人中心
      購物車
      優惠劵
      今日簽到
      有新私信 私信列表
      搜索
      俄罗斯videoxxxoo
    1. <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
    2. <pre id="gvoe3"></pre>
      <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

    3. <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">