猿型庫:Axure小練習-頁面滾動吸附

啥是頁面滾動吸附,說白了,比如頁面上的登錄框,隨着頁面的滾動,吸附在頁面的頂部,這個功能可以通過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資源;

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章