啥是頁面滾動吸附,說白了,比如頁面上的登錄框,隨着頁面的滾動,吸附在頁面的頂部,這個功能可以通過Axure裏面的window.scrollY實現。
效果查看:http://www.axurestudy.cn/pr/index.html
【需求分析】
1、初始頁面,顯示百度查詢結果列表和登錄框;
2、頁面向下滾動,當滾動位置小於登錄框的位置(Y座標)時候,登錄框位置不該表;
3、當滾動位置大於登錄框的位置(Y座標)時候,登錄框吸附到頁面頂部;
【原型設計】
1、製作一個內容顯示頁面,這個頁面要內容要超過1屏,這樣頁面才能向下拖動;爲了方便起見,我直接用百度搜索結果截圖了;
2、製作一個登錄框,登錄框包括賬號、密碼和登錄按鈕,然後把這些元件組合,命名爲login;
3、設置全局變量init_y,用於記錄登錄框的初始位置;
【交互設計】
1、設置頁面的裝載事件,在頁面裝載的時候,設置init_y 登錄框的Y座標;
2、設置頁面滾動事件,當窗口滾動 window.scrollY>= 登錄框的初始位置init_y的時候,把登錄框移動到滾動位置;
當窗口滾動 window.scrollY< 登錄框的初始位置init_y的時候,把登錄框移動到初始位置init_y;
回覆【入門】 ,獲取零基礎Axure快速入門視頻教程;
回覆【安裝】 ,獲取安裝程序;
回覆【練習】 ,獲取練習案例;
回覆【高保真】,獲取高保真原型;
關注微信公衆號【猿型庫】,獲取更多優質Axure資源;