代运营

daiyunying

Axure:如何实现Banner导航悬浮顶部效果

iseeyu3年前 (2023-11-19)代运营186

本文内容适合初级Axure同学学习,Axure高手有更快捷的方法可达此效果欢迎评论留言,一起交流学习~

背景

相信大家在工作中遇到这样的一个难题,绞尽脑汁,尝试N种方法,还是没有做出很流畅的悬浮效果。

曾经作者也遇到这样难题,今天我将带领大家一起学习,一起解决这个难题。

这是一个什么难题?

请查看下图:

网站头部,整站导航;页面下滑时提起,悬浮置顶效果很好做;把网站头部,整站导航放在动态模板外面或者将网站头部,整站导航放在动态面板里面,设置固定到浏览器中居中靠上即可。

但是页面下滑时,如果需要将频道导航提起,悬浮至置顶效果该怎么做呢?

这样的效果,现在网站中比比皆是,比如:36Kr、不凡商业、钛媒体….等等,都用此交互效果展示频道分类,便于用户点击,减少用户学习成本。

效果该怎么实现?

步骤1:建模块

我们新建3个板块,分别起上名字头部、广告、频道导航。

别光看着,来动手一起练习吧~

步骤2:起名字,后便找

选中板块后,给每一个板块名称写上。

步骤3:配置判断条件

前提:鼠标不要选中任何板块,如果你选中了头部板块,点击下背景即可取消板块选中。

①右侧点击窗口滚动时。

②点击添加条件,进入条件配置页面。

③选择值。

④点击fx>然后点击插入变量或函数,>最后鼠标往下滑到窗口处,选择Window.scrollY,确认。

⑤回到条件配置页面,点击+号旁边的fX按钮>然后点击添加区域变数>选择元件>选择广告,确认。

⑥回到条件配置页面,选择大于。

解释:刚刚我们设置的是,当窗口滚动时,向下所滚动的距离大于广告板块高度的值条件。

步骤4:添加频道导航提起案例

条件设定好后,点击确认。

①找到移动并点击它>然后选择频道导航>最后移动选框中选择“到达”。

②以上操作完成后,点击y处的fx>然后点击插入变量或函数>最后选择Window.scrollY,点击确认。

解释:

  • 步骤3中,当窗口滚动时,向下所滚动的距离大于广告板块高度的值。
  • 步骤4中,移动频道导航,到达坐标X0,Y窗口滚动的起点,也就是顶部位置。

频道导航提起,悬浮至置顶效果大功告成。

注意点:

  1. 频道导航板块别忘了置顶,不置顶提起悬浮时会被其它板块盖住。
  2. 练习时,请在频道板块下面增加点内容,随便打点字,页面展示区大于1屏才有向下滚动的效果。

频道导航如何回到自己位置上?

刚刚完成了,当窗口滚动时,向下所滚动的距离大于广告板块高度的值。移动频道导航,到顶部位置提起,浮动。

步骤1:新建案例名称

可以将刚刚做好的案例复制,粘贴生成一份新的案例。也可重新编辑一份新的案例,为了节省时间我就复制,粘贴生成一份新的案例。

步骤2:编辑条件

按刚刚教您的步骤,进入条件设立板块,别的都不要动,将大于改成小于即可。

解释:刚刚我们设置的是:当窗口滚动时,向上向下所滚动的距离小于广告板块高度的值条件。

步骤3:频道导航回城案例

①选中,频道导航,记住Y轴坐标值。

②点开案例,将记住的Y轴坐标值填充到Y字段。

解释:

  • 案例2:当窗口滚动时,向上向下所滚动的距离小于广告板块高度的值时。
  • 案例3:移动频道导航,到达坐标X0,Y220的位置(自己起始位置)。

本文为@运营喵原创,运营喵专栏作者。

扫描二维码推送至手机访问。

版权声明:本文由西安泽虎代运营发布,如需转载请注明出处。

转载请注明出处https://0291.com.cn/post/19690.html

相关文章

西安社保基数2026怎么调?五险缴费比例与避坑

每年7月,西安不少老板会收到银行扣款变多的短信,员工也发现工资条上社保那一栏和上个月不一样。别以为财务算错了,是社保基数又调了。社保基数跟退休金、医保报销、工伤待遇全都挂钩,可很多公司开了三五年,老板也没搞明白它到底按什么算、该交多少。这篇把基数调整规则、五险缴费比例、申报流程和常见的坑一次说清楚,...

西安找达人探店怎么合作?2026流程费用避坑指南

上个月有个开面馆的老板找我,说花了五千块请了个十几万粉的达人探店,视频发了三天,店里就多了六桌客人,其中四桌还是亲戚。这事在西安餐饮圈真不少见。探店看着简单——请个人来拍条视频,发出去就有客人上门。真做起来,坑比想象的多:报价虚高、数据注水、到店没转化。其实探店本身是门好生意,问题在于大部分老板把它...

西安新公司怎么开发票?2026数电票开通实操

公司执照下来那天,合伙人问我的第一句话不是办公室租哪,是客户要发票怎么办。说实话我也懵,脑子里还是抱着税控盘去税务局排队的画面。结果一查,2026年这套早过时了。西安新办企业基本都是直接开数电票,不用买设备,不用跑大厅,电脑和手机上就能把票开出去。这篇就把新公司从税务登记到开出第一张票的流程捋一遍,...

西安企业年报怎么报?2026填报流程与逾期后果

每年1月到6月,是西安企业集中报年报的时候。说它是大事吧,填起来也就二十分钟;说它是小事吧,漏报的代价一点不小。我见过有老板公司开了三年,年报一次没报,直到去银行办贷款被拒,一查才发现自己早就进了经营异常名录,贷款没批下来,还得先花钱找人移出异常。这篇文章就把企业年报这回事讲透:哪些主体要报、报什么...

西安公积金开户流程2026:材料比例与办理渠道

上个月一个做餐饮的老板找我,说公司开了快两年,一直没给员工缴公积金,现在想补上,问代办开户得花多少钱。他问了两家,报价一个八百一个一千八。我说你先别急着掏钱,公积金开户这件事本身不收费,材料备齐了线上就能办,快的当天就批下来。这篇就把西安公积金开户要什么材料、流程怎么走、缴存比例和基数怎么定,还有几...

西安代理记账多少钱一年?2026价格行情与避坑

刚注册公司的老板,十有八九都问过同一句话:代理记账到底多少钱?我接触的西安客户里,有人一年交三百,也有人一年交一万二,差价四十倍,而且两边都说自己正规。问他们区别在哪,多半答不上来,只能含糊回一句便宜没好货。这事其实不复杂,钱多钱少,主要差在税种、业务量和服务内容上。这篇把2026年西安的行情、服务...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。
现在,非常期待与您的又一次邂逅

我们努力让每一部企业宣传片和抖音短视频成为商业大片