页面向下滚动时导航顶部吸附效果

AxureRP7.0教程 小楼一夜听春语 37823℃ 0评论

这是无论在Web端还是移动端都有一种效果。

页面顶部是宣传图片,图片下方是导航菜单,当浏览器窗口滚动条向下拉动或鼠标滚轮向下滚动时(移动端为手指向上滑动屏幕),一旦浏览器窗口顶部边缘超过导航菜单的位置,导航菜单开始固定在浏览器顶部边缘的位置,不再随页面向上移动。(图1)

效果动画:

0

(图1)

说到这个效果,我想起有人问过:Axure有必要学函数吗?搞那么复杂有必要吗?

那么,大家在看后面的内容之前,先思考一下。这个效果怎么实现?

————————————我是风骚的分割线——————————————-

回答上面的提问:这个效果只有通过函数才能简洁正确的实现。

分析一下这个效果的过程:

1、交互什么时候触发?

答:浏览器窗口滚动的时候。

2、分别有几种情形?

答:两种情形,一种是超过指定的距离,一种是未超过指定的距离。

3、需要判断什么内容?

答:需要判断浏览器窗口滚动的距离。

4、浏览器窗口的滚动距离怎么获取?

答:通过函数“Window.scrollY”。

好了,分析完毕,下面是实现过程。

1、先准备元件。(图2)

01

(图2)

  • 顶部是轮播图片,这个效果在我的网站、视频、书籍(图里的那个),都能够找到,在此不做讲解。
  • 图片下面是导航菜单。因为导航菜单要统一移动,所以可以放入几个矩形作为菜单项,然后全选,点击鼠标右键,在菜单里选择【转换为动态面板】,这个动态面板命名为“menu”。之后,我们在交互中移动动态面板就能够移动所有菜单项了。这里需要注意的是,动态面板要置于顶层,以免页面内容滚动时覆盖导航菜单。还有就是几下动态面板的y轴坐标,一会儿交互中要用到。
  • 导航菜单下面是页面的内容,这个案例只是放了一些文本标签和文本段落,表示文章内容。这里要注意的是内容一定要足够多,只有内容高度超过浏览器窗口高度时,才能够进行滚动浏览。

2、添加交互。

  • 浏览器窗口滚动的事件,在软件中下部的【页面交互】中设置。双击【窗口滚动时】的事件名称,打开用力编辑。额…用例编辑。(图3)

02

(图3)

  •  第一种情形(Case 1)  ,我们需要先完成滚动超过指定的距离时的交互,这里需要进行对滚动距离的判断。在用例编辑窗口,点击【编辑条件】,判断窗口的滚动距离是否大于240。

03

(图4)

  • 当满足上述条件时,【移动】动态面板“menu”【到达】x轴“0”y轴“[[Window.scrollY]]”的位置。“[[Window.scrollY]]”就是窗口当前滚动的距离,也就是浏览器窗口上边缘在页面中的位置。在浏览器窗口滚动时,将动态面板“menu”移动到这个位置,就是将它时时移动到浏览器窗口的上边缘的位置,也就是顶部吸附效果。(图5)

04

(图5)

  • 完成了第一种情形后,再次双击事件名称或者点击添加用例,编辑第二种情形。软件这个时候会自动给出【Else If True】,表示否则的情况;在用例编辑中我们设置【移动】动态面板“menu”【到达】x轴“0”y轴“240”的位置,也就是回到初始位置。(图3)
  • 最后,大家可能还有一个疑问,就是“[[Window.scrollY]]”从何而来?其实,函数是可以直接输入使用的,如果记不住单词,也可以点击界面中的“fx”(图4与图5中箭头指向位置),在打开的窗口中点击【插入变量或者函数…】,通过选择来完成输入。(图6)

05

(图6)

 以上就是导航菜单顶部吸附效果实现的分析与过程。大家不难发现,其实使用函数并不复杂,关键在与知道函数的用途与使用方法。

所以,原型中使用函数,旨在解决问题和提高效率,不要为了使用而使用,也不要对其有偏见而放弃使用。

源文件下载链接:http://pan.baidu.com/s/1skcYcQp


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 页面向下滚动时导航顶部吸附效果

喜欢 (47)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(20)个小伙伴在吐槽
  1. 往下拉的时候,感觉导航在闪动,怎么样才能实现感觉导航顶部吸附并且感觉不到在移动
    勺子小主2016-04-14 14:53 回复
  2. 有用!
    刀刀狼2016-04-24 15:22 回复
  3. 用PR8做出来,没出现效果...
    纸笔春秋2016-05-07 16:09 回复
  4. 为啥一点效果都没有呢
    naonao2016-05-11 15:00 回复
  5. 同样没效果。。。
    Miki2016-05-12 16:37 回复
  6. 我也是用8做的,也没有效果
    吕婷2016-05-13 17:10 回复
  7. 没效果,搞了半个多小时,步骤没有错,到底怎么回事儿?
    暮云vs月明星稀2016-05-17 20:59 回复
  8. 移动 要设置为【到绝对位置】就可以实现了,默认的是【相对距离为】,这个改一下就可以了。
    阿南2016-05-27 15:42 回复
  9. 感谢博主分享!
    母婴B2b2016-06-12 10:53 回复
  10. 抖动很厉害,菜单栏一直闪烁,为什么呢
    sai2016-06-17 16:28 回复
  11. 在小楼老湿的启发下,我把移动端拖拽时候的吸附效果也做出来了,哈哈
    举个栗子2016-07-11 17:19 回复
    • 请问是如何实现的?我试了几种都无法实现
      hgh2016-07-21 17:01 回复
  12. 有个点想不明白“Window.ScrollY:获取窗口纵向滚动的当前坐标值”,如果Window.ScrollY是个不定值,但是为什么在IF条件下,mune的绝对位置y=Window.ScrollY而不是y=0,mune就能在顶部吸附了?希望小楼老师能看到并予以讲解。
    hgh2016-07-21 16:10 回复
    • 小楼一夜听春语
      y的坐标是对页面来说的
      小楼一夜听春语2016-07-22 10:25 回复
    • 手动改position为fixed
      kaidyful2016-12-09 15:28 回复
  13. 讲得很通俗易懂,五分钟搞定。分别用axure7和axure8试了下,都没有问题,但是无论是axure7还是axure8,导航拉table元件再转化为动态面板的话都无法固定在窗口顶部,不晓得是啥原因呢?导航是只能拉矩形再全选转化成动态面板?
    产品汪汪汪2016-09-30 18:10 回复
  14. 感谢博主的分享~
    母婴B2C2016-10-28 15:18 回复
  15. 为什么导航顶部吸附的时候是透明无底色的,加了白色底色也不行?
    carrie2017-04-10 16:52 回复
    • 右键动态面板-顺序-置于顶层
      Ccccc2017-06-16 14:20 回复
  16. 我的预览的时候闪了下 不见了。。。
    Mmmm2017-08-05 16:36 回复