Axure教程:导航栏和广告悬停效果制作

专为互联网人打造的365天成长计划,500门视频课程随便看,构建你的产品、运营知识体系。查看详情

这篇文章,手把手教你如何用Axure做出:“任随窗口滚动,而导航部分卡片保持不动,(即卡片始终悬停在指定的位置)”的效果。

如黄色框始终悬浮效果。

123

只需要一个事件:3个步骤。

第一步,做好导航菜单项部分,然后全选住,点击右键”转换为动态面板”,并在右侧的元件命名处,命名为title。

0000

第二步:做好下面的主体内容部分。(我用图片占位符和矩形,随意表示一下主体内容部分)

第三步:设置窗口滚动事件:

(1 ) 在页面下的“页面交互”选项卡下找到“窗口滚动时”事件。

12345678

(2)然后按照下图中的数字顺序1->2->3->4->5点击选择设置:

(移动—勾选动态面板title—-选择“绝对位置到”)

12345

点击第二个fx(y坐标对应),弹出“编辑值”窗口。

点击“插入变量”,选择  Window.scrollY。

(变量框内容:删除前面的0。最终效果是[[Window.scrollY]])

123456

(变量框内容:删除前面的0。最终效果是[[Window.scrollY]])

确定事件。

预览或生成一下,就能看到你想要的效果,任你页面内容有多长,title部分内容始终在上头屹立不动。

这样的方式还可以做到任意位置,如在页面旁边放广告,只要你设置好绝对位置的y坐标轴,任你窗口如何滚动,小广告始终安静地悬挂在那里。

事件:窗口滚动时 移动  某个元件(内容生成的动态面板或小图片)绝对位置到 y:fx  。

设置  fx通常有以下几种结果:

[[Window.scrollY]]

[[Window.scrollY+200]] ( 200为举例,坐标根据实际情况定)。

下面试试做个右侧悬浮不动的小广告吧~~~

 

本文由 @beikehuahua 原创发布于人人都是产品经理 ,未经许可,禁止转载。

打赏也是一种认可
评论
有话不说憋着难受!
  1. Axure8.0中我没找到当窗口滚动时这个交互事件

    回复
  2. 设置的是[[Window.scrollY+30]]
    大神 这个加上之后,会和页面顶端同样保持30PX 如何消除这30PX间隙

    回复
  3. 现在在用固定到浏览器功能,以后用到再来学习~~~总之先收藏了~谢谢作者

    回复
  4. 亲们,刚刚那篇教你们做鼠标指针截获跟随的文章,听一个读者的建议,正在修改bug,更新完需要两个小时后,才会显示出来~~~~快周末了,我周六日有空的话,再给你们整个系统而实用的文章哈 :smile: ~~~

    回复
    1. 求源文件

      回复
  5. 做了一个固定导航没有问题,加了一个固定广告就有问题了~是因为做了2个有冲突吗?

    回复
    1. 固定广告同样的处理,我试了没有问题

      回复
    2. 不会的亲,可能你没有选绝对位置吧?比如你想在网页右上角(950,150)坐标处挂个小广告,可以紧跟窗口滚动事件“移动 title 到绝对位置:(0,[[Window.ScrollY]]),

      再设置: 移动 广告内容 到绝对位置 (950,[[Window.ScrollY+150]]),挂几个都是绝对没问题的。
      注意哦,1,绝对位置, 不是相对位置 2,Window.ScrollY,不是Window.ScrollX

      回复
  6. 谢谢大家的提醒,互相学习啦,今天晚上,我会发一篇更有用的,我做产品经理两年了,由于公司产品要对客户负责,不敢乱往外发布东西,所以,我只发布和操作技巧有关的实用的东西,不露产品原型和UI原页~~~,但发的东西肯定是有用的~~~ :grin:

    回复
    1. 请问如何设置当窗口滚动到特点的位置时,在将标签导航置顶呈现

      回复
    2. 用接触线,接触时显示标题并置顶,不接触时隐藏标题;我最近的一个版本里面有表格,表格的行数比较多,我希望滑动到下面时自动把表格的标题栏置顶显示,就用的这个方法;

      回复
    3. 谢谢!

      回复
    4. 如果想在导航上做一个登陆的按钮,然后登陆上去之后会显示昵称,怎么样设置让登陆之后的昵称在每个页面都显示呢?
      我现在只能是让导航在每个不同的页面上都登录一次

      回复
    5. 非常实用,关键今天刚好用上,做了个悬浮菜单,多谢分享!

      回复
  7. 一种不同的思路,也行可以用到不能用“固定到浏览器”的情况下,谢谢分享! :smile:

    回复
    1. 互相学习啦,还可以把某个元件固定到任意你想要的位置的:如窗口滚动时 移动 某个元件(内容生成的动态面板或小图片)绝对位置到 x坐标定好x设置为950,y设置为[[Window.Scroll+450]] 那么无论你的窗口如何滚动,元件始终在,(950,450)

      回复
    2. 少了个字母Y,[[Window.ScrollY+450]]

      回复
  8. 难道你不知道有一个功能叫“固定到浏览器”吗?

    回复
    1. 亲,我学习了,还有哦,这个坐标设置好,能在任意位置设置广告卡片的~~~

      回复
  9. 转化为动态面板之后,直接右键选择“固定到浏览器”会不会方便点? :neutral:

    回复
    1. 我试过的亲,但是窗口内容特别长的时候,一滚动,好像它就没了,不知道是不是我的默认浏览器的原因~~ : :arrow:

      回复