Axure教程:页面滚动时导航菜单始终可见
xsobi 2024-11-24 23:32 28 浏览
如何让页面的导航菜单在滚动时也可见呢?笔者以此为需求,讲解了如何用Axure实现这个需求。
不知大家在某东官网买书浏览网页的时候,有没有发现这样一种很有趣的现象:在书籍详细页面,页面最上面一般是展示图书相关图片以及价格等信息,再往下就是图书更详细的信息。通常会有这4部分内容分别以Tab页签的形式展示,如商品介绍,规格包装,售后保障以及商品评价。
每类的详细信息都比较多,当我们想要了解更多信息的时候,我们就会向下滚动鼠标,正常来说滚动的距离超过页签原本高度的时候,这4个Tab页签就会消失不见的。但是我们会发现:这4个Tab页签始终可见并且始终的页面的最上面。
来来来,我们先看一下效果:
大家想不想知道用Axure来怎么实现这种效果呢?下面就跟大家分享一下~
下面将从3个方面展开:
需求分析
通过上面的描述,相信大家比较了解需求了。话不多说,我们再来梳理一下需求,深入分析需求。
这个需求可以浓缩简化为以下:页面某些中菜单栏,在鼠标滚动的距离超过其原本高度的时候仍在界面显示,并且显示在页面的最上面。
浓缩为Axure语言就是:鼠标滚动的距离超过某元件原本高度的时候仍在界面显示,并且显示在页面的最上面。
看到这里,大家是不是会想到Axure中的动态面板呢?
对,没错,实现核心就是用到动态面板及函数。
Axure关键点分析
下面为Axure中的关键点分析:
4个Tab标签用到的动态面板
页面滚动的距离
这个案例中涉及页面的滚动,页面滚动时仍需要判断页面滚动的距离,当页面滚动的距离大于等于动态面板的原本高度时,则将其移至页面最上面即当前的页高度,这里是绝对距离;否则不移动。
判断页面的高度,需要用到窗口高度函数, [[Window.scrollY]];4个标签动态面板的y坐标轴为400。
满足这个条件,则将动态面板移至当前页面高度的地方,注意是绝对距离。
效果展示
最后,我们来看看最终的效果,网址为 https://3djl4z.axshare.com。
感谢小伙伴们的阅读~
本文由 @翠baby 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于CC0协议
相关推荐
- 5.5英寸触屏,搭载“安卓系统”的智能计算器评测:这设计挺脑洞
-
“计算器”可以说是我们日常生活中较为常用的一款电子产品,纵使手机上也有计算器功能,且足以替代实物计算器,但现在还是有很多人习惯用实物计算器,例如;做批发的店铺老板,计算器就放在店铺显眼位置,结账时顺手...
- Android之父晒新款手机,造型酷似遥控器
-
安迪·鲁宾大家可能并不陌生,鲁宾曾一手创建了安卓操作系统,被外界誉为“安卓之父”。2015年鲁宾又创立智能手机公司EssentialProductsInc,还获得亚马逊和腾讯的投资。在筹备两年后,...
- WP8.1的IE11为何不支持淘宝网触屏版?
-
IT之家(www.ithome.com):WP8.1的IE11为何不支持淘宝网触屏版?众所周知IE浏览器有自己的一个内核(简称IE内核),WP8.1系统的自带移动版IE11浏览器,但为什么iOS、An...
- 手机屏幕失灵乱跳乱点,屏幕时好时坏是怎么回事?
-
我们平时在使用手机的时候,如果我们的手机经常出现屏幕不受控制,手机屏幕会出现乱跳自己乱点的一些情况,这是什么问题呢?出现这种问题我们应该怎么去解决呢,今天我们九一手机维修就来跟大家说说这个问题该怎样去...
- 跨界表演有风险,百事手机 P1 众筹宣告失败
-
大家还记得曾经轰动一时的百事手机P1吗?这款10月份曝光、11月份众筹的手机在京东众筹失败,已经退款。想要喝着百事可乐玩着百事手机的网友,赶紧该干嘛干嘛去吧。据悉,百事可乐P1采用铝合金...
- “傀儡”病毒感染超10万台手机
-
本报讯(记者孙奇茹)手机在没人操作的情况下,竟然自己亮屏、执行一些动作。这不是闹鬼,而是手机中毒了。日前,猎豹移动安全实验室发出警报,全球首个伪造模拟用户操作的安卓病毒被截获,并被命名为“傀儡(Go...
- Android事件分发机制
-
事件分发机制Android事件分发是指在Android系统中,当用户触摸屏幕或执行其他操作时,系统如何将这些事件传递给正确的视图或组件进行处理的过程。Android事件分发遵循一种称为"事件分...
- Android让视图像玻璃一样破裂
-
AndroidUILibs之BrokenView1.说明BrokenView让视图产生玻璃破裂的效果。注意:该库只能在API14以上的设备上运行2.配置在模块的build.gradle上面添加...
- 车载大屏爽翻了?英国研究机构:大尺寸触摸屏比酒驾更危险
-
大屏不仅蔓延到手机,汽车也不例外,得益于更加直观的人机交互体验,车载触控大屏逐渐成为越来越多车企的主流选择。然而最新的一项研究证明——触控大屏比酒驾、毒驾更危险。日前,英国一项道路安全研究报告指出,当...
- 安卓系统被曝严重安全漏洞 恶意程序竟能秘密拍照或录制音视频
-
央视网消息:据今日俄罗斯网站20号报道,以色列一家知名网络安全公司宣称发现谷歌、三星等制造商生产的安卓手机,系统存在严重安全漏洞,黑客能够在未经手机机主许可的情况下,操控安卓手机秘密拍摄照片、录制视...
- 央视曝光:安卓系统曝漏洞!有人可能正在用你的手机...
-
近日,谷歌、三星等制造商生产的安卓手机,被曝出系统存在严重安全漏洞。黑客能够在未经手机机主许可的情况下,操控安卓手机秘密拍摄照片、录制音视频并上传。点击下方,先看视频↓↓↓视频来源:央视新闻利用漏洞!...
- 安卓系统曝漏洞!有人可能正在用你的手机秘密拍照
-
近日,谷歌、三星等制造商生产的安卓手机,被曝出系统存在严重安全漏洞。黑客能够在未经手机机主许可的情况下,操控安卓手机秘密拍摄照片、录制音视频并上传。利用漏洞“恶意应用程序”拍照、录音视频并上传据今日俄...
- 安卓用户注意了 你的爱机可能会面临新式恶意攻击
-
据外媒报道,最近,东京早稻田大学的三名学者称,现代Android智能手机容易受到一种名为“Tap'nGhost”的新型攻击,这种攻击可以使不存在的“手指”点击手机屏幕,以采取行动。“Tap'nGh...
- Android学习之Touch事件的处理
-
在移动开发过程当中,我们经常会遇到手势处理和事件触摸的情况,如果不了解整个事件的处理机制,对于开发的同学和码农是非常痛苦的,但是事件触摸的处理确实是一个非常复杂的过程,细讲起来,估计我都能讲迷糊,这里...
- 办公小技巧:制作模糊查询效果Excel下拉菜单
-
在Excel单元格中输入特定范围的内容时,一般会利用数据有效性生成下拉列表的方式进行,但如果源列表的内容太多(比方说有数百个),这时再通过下拉列表查找需要的值就很不方便了。如果采用智能感知的模糊查询下...
- 一周热门
- 最近发表
- 标签列表
-
- grid 设置 (58)
- 移位运算 (48)
- not specified (45)
- 导航栏 (58)
- context xml (46)
- scroll (43)
- dedecms模版 (53)
- c 视频教程下载 (33)
- listview排序 (33)
- characterencodingfilter (33)
- getmonth (34)
- label换行 (33)
- android studio 3 0 (34)
- html转js (35)
- 索引的作用 (33)
- checkedlistbox (34)
- xmlhttp (35)
- mysql更改密码 (34)
- 权限777 (33)
- htmlposition (33)
- 学校网站模板 (34)
- textarea换行 (34)
- 轮播 (34)
- asp net三层架构 (38)
- bash (34)