《Axure教程:页面滚动时导航菜单始终可见》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强动态面板,函数,标签等多维度案例或实操来进行更多的学习;此教程是由咖啡煮抄手在2021-08-26发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
如何让页面的导航菜单在滚动时也可见呢?笔者以此为需求,讲解了如何用Axure实现这个需求
不知大家在某东官网买书浏览网页的时候,有没有发现这样一种很有趣的现象:在书籍详细页面,页面最上面一般是展示图书相关图片以及价格等信息,再往下就是图书更详细的信息。通常会有这4部分内容分别以Tab页签的形式展示,如商品介绍,规格包装,售后保障以及商品评价。
每类的详细信息都比较多,当我们想要了解更多信息的时候,我们就会向下滚动鼠标,正常来说滚动的距离超过页签原本高度的时候,这4个Tab页签就会消失不见的。但是我们会发现:这4个Tab页签始终可见并且始终的页面的最上面。
来来来,我们先看一下效果:
大家想不想知道用Axure来怎么实现这种效果呢?下面就跟大家分享一下~
下面将从3个方面展开:
通过上面的描述,相信大家比较了解需求了。话不多说,我们再来梳理一下需求,深入分析需求。
这个需求可以浓缩简化为以下:页面某些中菜单栏,在鼠标滚动的距离超过其原本高度的时候仍在界面显示,并且显示在页面的最上面。
浓缩为Axure语言就是:鼠标滚动的距离超过某元件原本高度的时候仍在界面显示,并且显示在页面的最上面。
看到这里,大家是不是会想到Axure中的动态面板呢?
对,没错,实现核心就是用到动态面板及函数。
下面为Axure中的关键点分析:
4个Tab标签用到的动态面板
页面滚动的距离
这个案例中涉及页面的滚动,页面滚动时仍需要判断页面滚动的距离,当页面滚动的距离大于等于动态面板的原本高度时,则将其移至页面最上面即当前的页高度,这里是绝对距离;否则不移动。
判断页面的高度,需要用到窗口高度函数, [[Window.scrollY]];4个标签动态面板的y坐标轴为400。
满足这个条件,则将动态面板移至当前页面高度的地方,注意是绝对距离。
最后,我们来看看最终的效果,网址为 https://3djl4z.axshare.com 。
以上就是Axure教程:页面滚动时导航菜单始终可见的全部内容介绍了,关于更多Axure教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 axure9全局变量和局部变量的应用情况及操作实例
> 下一篇 Axure全局变量的应用:空页面的新增数据校验
2022-08-18 08:39
2022-08-15 08:39
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论