【授人以渔or鱼】web顶部导航悬浮效果(带顶部通栏) 原型 免费

xiaobai668 产品大牛 1月前 835

新手交流,大神勿笑。

刚快气炸了,好不容易写好的流程和步骤,因为论坛不提供草稿功能,手误关闭了浏览器,什么都没有了。只好重新开始写,此处哭一会儿。

今天跟大家分享的是:当顶部导航跟顶部通栏(通知消息、快捷登录注册入口等)同时存在时,鼠标滚动后如何保证导航悬浮。一样先感谢axure中文网,感谢pmyes,感谢大梨老师、小楼老师。同时推荐咱们论坛一个很厉害的人:黑胡子。^_^

鼠标滚动前效果

存在顶部通栏、顶部导航,请注意页面其他元素(焦点图、栏目等)做了删减,保留部分只是美观考虑,此处不做赘述。

鼠标滚动后效果

当鼠标滚动一定距离后,通栏隐藏,菜单导航始终悬浮

axure版本

请使用axure 8.0打开

所用元件

动态面板2个:通栏1个、菜单导航1个

核心交互

窗口滚动事件

1、新建导航面板

导航及通栏这种模块,一般都是全站通用。因此采用在母版中新建动态面板的方式。

为通栏及导航命名,分别在sate1状态里设置相应产品元素

2、设置【固定到浏览器】交互

为【顶部菜单导航】动态面板设置【固定到浏览器】,具体设置数值不同效果不同,大家下载RP文件后自行体会。

额外说明:如果没有顶部通栏的话,采用这个方式就可以直接实现顶部导航悬浮效果了。

3、设置【窗口滚动事件】

我们为整个母版设置【窗口滚动事件】,通过设置前置if/else if条件来设置交互动作

以窗口滚动垂直(Y轴)距离200进行判断,当大于或小于等于时,分别对【顶部菜单导航】和【顶部通栏】进行动作设置。具体数值请大家自行揣摩和尝试

4、引用母版

母版配置好后,我们新增页面【首页】,拖入母版即可。其他如【页面载入时】选中某个具体菜单等操作,此处不赘述,大家不明白的,请看我之前的帖子。

至此,大功告成。磨刀不误砍柴工,大家一起磨刀吧,哈哈。

上传的附件:
快速回复
最新回复 (135)
全部楼主
  • dragon4 普通用户 1月前
    0 引用 2
    感谢分享
  • yong 普通用户 1月前
    0 引用 3
    感谢分享
  • 逍遥浪子 普通用户 1月前
    0 引用 4
    谢谢
  • Hidy 普通用户 1月前
    0 引用 5
    感谢分享
  • miao9920 普通用户 1月前
    0 引用 6
    谢谢分享,正好在做此修改
  • sunnyroom 普通用户 1月前
    0 引用 7
    谢谢分享
  • 醉TWO 普通用户 1月前
    0 引用 8
    谢谢分享
  • wshengming 普通用户 1月前
    0 引用 9
    感谢分享
  • 宝贝儿honey 普通用户 1月前
    0 引用 10
    666
  • feiyunad 普通用户 1月前
    0 引用 11
    这个有点意思
  • anyan 普通用户 1月前
    0 引用 12
    学习一下!谢谢分享!
  • XUERZE 普通用户 1月前
    0 引用 13
    感谢楼主分享
  • 10951606 普通用户 1月前
    0 引用 14
    3q
  • SteveD 普通用户 1月前
    0 引用 15
    谢谢分享~
  • erlongshang 普通用户 1月前
    0 引用 16
    感谢楼主分享
  • woyaosj 普通用户 1月前
    0 引用 17
    感谢楼主分享 
  • snow666 普通用户 1月前
    0 引用 18
    sixsixsix
  • daxiang 普通用户 1月前
    0 引用 19
    感谢分享
  • 猕猴桃 普通用户 1月前
    0 引用 20
    感谢分享
  • 烫手的冰 普通用户 1月前
    0 引用 21
    感谢分享 
  • 大湖子乖乖 实习版主 1月前
    0 引用 22
    谢谢,共同学习
  • marybi 普通用户 1月前
    0 引用 23
    感谢
  • LeeYatSan 普通用户 1月前
    0 引用 24
    谢谢
  • foxfrie320 普通用户 1月前
    0 引用 25
    谢谢分享
  • 小丑鱼学习 普通用户 1月前
    0 引用 26
    谢谢分享
  • luan040 普通用户 1月前
    0 引用 27
    谢谢
  • 13874989965 普通用户 1月前
    0 引用 28
    谢谢分享
  • bin828 普通用户 1月前
    0 引用 29
    1
  • 6666 普通用户 1月前
    0 引用 30
    我的名字就是我想说的
  • hll 普通用户 1月前
    0 引用 31
    优秀
  • Alice 普通用户 1月前
    0 引用 32
    感谢
  • hailey 普通用户 1月前
    0 引用 33
    感谢
  • Arwen 普通用户 1月前
    0 引用 34
    6666
  • 总藏佐 普通用户 1月前
    0 引用 35
    感谢分享
  • nanihuang 普通用户 1月前
    0 引用 36
    感谢分享
  • lhy8962 普通用户 1月前
    0 引用 37
    感谢分享
  • arche 普通用户 1月前
    0 引用 38
    感谢楼主分享
  • 交互新鲜人 普通用户 1月前
    0 引用 39
    感谢分享
  • Fshelly 普通用户 1月前
    0 引用 40
    好东西  谢谢
  • jiyong 普通用户 1月前
    0 引用 41
    好东西,不错。666
  • 木头探 普通用户 1月前
    0 引用 42
    学习
  • dazhi1121 普通用户 1月前
    0 引用 43
    感谢
  • 小虾米 普通用户 1月前
    0 引用 44
    6666
  • liaoljh 普通用户 1月前
    0 引用 45
    感谢分享,学习了
  • 亦轩 普通用户 1月前
    0 引用 46
    666
  • cinds 普通用户 1月前
    0 引用 47
    学习一下
  • kirasamen 普通用户 1月前
    0 引用 48
    学习学习
  • cqw1991 普通用户 1月前
    0 引用 49
    感谢分享
  • ayinmu 普通用户 1月前
    0 引用 50
    6666
  • wangz_cy 普通用户 1月前
    0 引用 51
    6666666
  • 贤蓝 普通用户 1月前
    0 引用 52
    看看
  • kiocahduaf 普通用户 29天前
    0 引用 53
    感谢分享
  • Lucifer 普通用户 29天前
    0 引用 54
    感谢分享
  • 莫欣 普通用户 28天前
    0 引用 55
    感谢~
  • lrm 普通用户 27天前
    0 引用 56
    感谢分享
  • weikelei 普通用户 27天前
    0 引用 57
    谢谢分享,好人一生平
  • geoyh 普通用户 26天前
    0 引用 58
    感谢
  • 张杨 普通用户 26天前
    0 引用 59
    谢谢
  • luck20 普通用户 26天前
    0 引用 60
    感谢
  • 紫筱木木叁 普通用户 26天前
    0 引用 61
    666
  • FlashCyx 普通用户 26天前
    0 引用 62
    感谢分享
  • littlefairy 普通用户 26天前
    0 引用 63
    感谢分享!
  • 开花的树 普通用户 26天前
    0 引用 64
    666
  • 茴之孑然 普通用户 26天前
    0 引用 65
    谢谢
  • 晓晓 普通用户 26天前
    0 引用 66
    dragon4 感谢分享
    看一下
  • zhounan 普通用户 26天前
    0 引用 67
    6
  • songwanxu 普通用户 26天前
    0 引用 68
    这个可以有
  • xiaochunlong 普通用户 26天前
    0 引用 69
    6666
  • Vision_sun 普通用户 26天前
    0 引用 70
    感谢分享
  • 大星 普通用户 26天前
    0 引用 71
    谢谢分享
  • 122224 普通用户 26天前
    0 引用 72
    a'a
  • greenun 普通用户 26天前
    0 引用 73
    好人一生平安
  • hhxx1012 普通用户 26天前
    0 引用 74
    感谢
  • panly03 普通用户 26天前
    0 引用 75
    十分感谢!
  • 33682306 普通用户 26天前
    0 引用 76
    谢谢分享
  • 华丽出世 普通用户 25天前
    0 引用 77
    看看
  • 琉璃橙 普通用户 25天前
    0 引用 78
    感谢!
  • PANDA1121 普通用户 25天前
    0 引用 79
    666~
  • hbitmp 普通用户 25天前
    0 引用 80
    老板万岁
  • xiaobai668 产品大牛 25天前
    0 引用 81
    hbitmp 老板万岁
    我是打工的
  • 从前 普通用户 25天前
    0 引用 82
    感谢大佬分享
  • lindazhao 普通用户 25天前
    0 引用 83
    谢谢分享,辛苦了!
  • 螺丝起子 普通用户 25天前
    0 引用 84
    谢谢分享,辛苦了
  • xing 普通用户 24天前
    0 引用 85
    谢谢
  • James970529 普通用户 24天前
    0 引用 86
    666
  • 252311126 普通用户 24天前
    0 引用 87
    厉害    辛苦
  • nxtangkun 普通用户 24天前
    0 引用 88
    必须点赞 
  • justy001 普通用户 23天前
    0 引用 89
    感谢分享~
  • hyblue 普通用户 23天前
    0 引用 90
    https://www.axure.com.cn/product-category/market/library/
  • 泡沫 普通用户 22天前
    0 引用 91
    1
  • 前派互联 普通用户 20天前
    0 引用 92
    不错不粗
  • Aoswin 普通用户 19天前
    0 引用 93
    感谢分享 
  • hxccmaster 普通用户 19天前
    0 引用 94
    谢谢,正需要
  • 王兴武 普通用户 19天前
    0 引用 95
    感谢  优秀
  • 大表弟 普通用户 19天前
    0 引用 96
    感谢
  • 蔡天奇 普通用户 18天前
    0 引用 97
    谢谢分享
  • zhyixiao 普通用户 18天前
    0 引用 98
    thanks
  • 仙贝太太 普通用户 17天前
    0 引用 99
    棒棒!!
  • leemax 普通用户 17天前
    0 引用 100
    谢谢
返回