美文网首页
猿型库:Axure小练习-页面滚动吸附

猿型库:Axure小练习-页面滚动吸附

作者: 猿型库 | 来源:发表于2020-03-28 18:12 被阅读0次

    啥是页面滚动吸附,说白了,比如页面上的登录框,随着页面的滚动,吸附在页面的顶部,这个功能可以通过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资源;

    相关文章

      网友评论

          本文标题:猿型库:Axure小练习-页面滚动吸附

          本文链接:https://www.haomeiwen.com/subject/wrysuhtx.html