Axure怎么制作页面滚动时菜单固定在顶部的页面？
我要评论Axure可以制作出保真度相当高的原型，除了页面布局、UI以外，其强大的交互设计能力让这些本来静止的元素高效交互起来，形成以假乱真的高保真原型。本文介绍如何做一个在滚动中将菜单固定在顶部的页面，属于中级Axure案例。本文旨在展示交互效果，不对页面具体内容和UI进行设计。
1、制作页面
为了体现效果，我们需要做一个比较长（高）的页面，在Axure工作区中拖入4个矩形，分别为顶部标题、菜单、页面内容、底部。设置矩形宽度和高度，让其看起来像是一个页面布局。
2、制作随页面滚动的标题
为了让效果更加明显，我们将标题进行区别设置，设置矩形背景色为黄色，你也可以通过设置其他属性来进行区别。将标题命名为“标题1”。
3、制作固定的标题
滚动中固定在顶部的标题并非页面上的标题，是单独制作的。复制“标题1”，将复制的标题命名为“标题2”，设置“标题2”x坐标等于“标题1”的x坐标，y坐标等于0。修改“标题2”背景色为蓝色。
4、制作固定的标题
右键单击“标题2”，点击“转换为动态面板”，将动态面板命名为“固定菜单”，在元件属性与样式中点击“固定到浏览器”勾选“固定到浏览器窗口”，完成后隐藏动态面板。
5、制作固定锚点
在工作区中拖入一个动态面板，设置其x和y坐标等于0，调整其宽度和高度分别为60和20，将动态面板命名为“固定锚点”，设置其固定到浏览器。
6、制作滚动锚点
在工作区中拖入一个热区，设置其x坐标等于0，y坐标等于“菜单1”的y坐标加上固定锚点的高度，设置其宽度等于固定锚点的宽度，高度直接拖动到页面底部，命名为“滚动锚点”。
7、设置交互
打开页面交互面板，双击“窗口滚动时”事件，添加条件“元件范围 滚动锚点 接触到 元件范围 固定锚点”，确定，设置动作为“显示 固定菜单”。
8、设置交互
继续在“窗口滚动时”事件上添加动作，添加条件“元件范围 滚动锚点 未接触 元件范围 固定锚点”，确定，设置动作为“隐藏 固定菜单”。
9、预览效果
至此，所有设置均已完成，按F5进行预览吧。
相关文章
FC模拟器如何自定义按键布局？FC模拟器又称红白机模拟器，让玩家可以在电脑或其他设备上重温经典游戏,自定义按键布局是使用模拟器时一项重要的功能，下面就为大家带来FC模2025-10-20
今天给大家介绍一下即梦ai生成图片的具体操作，生成图片分2种情形，一种是完全由文字生成图片，另一种是根据参考图生成图片，今天我们先介绍上传参考图生成新图的教程2025-10-02
复杂数据统计和分析不用烦! DeepSeek+豆包自动处理Excel数据真方便
AI时代来临，表格处理变得如此简单高效，简直太方便了,尤其是复杂的数据统计和分析，几分钟就搞定，强烈推荐给大家试试2025-08-07
困扰大家20年难题被破解了! DeepSeek一键生成农历函数附代码
之前利用PQ通过获取API来得到公历对用的农历，但是无奈效率太低了，现在利用DeepSeek一键生成农历函数，分分秒解决困扰大家20年难题2025-08-01
Copilot插件怎么用? 解锁AI助手的扩展功能的使用指南
Copilot是一款集成于操作系统和办公软件中的AI助手，该怎么使用Copilot插件呢？下面我们就来看看详细介绍2025-07-28- 之前都是用思维导图软件做的员工手册，现在想要提升工作效率，用DeepSeek制作，该如何操作呢？详细请看下文介绍2025-07-15
利用AI工具提高B站学习效率! DeepSeek一键生成B站视频笔记详解
在B站学习视频课程时，我们常常会遇到视频节奏缓慢或内容冗长的问题，导致注意力难以集中，我们可以利用ai解决这个问题，做好内容笔记，详细如下文所述2025-06-25
Windows系统本地自建蚂蚁(leanote)笔记图文教程
Leanote蚂蚁笔记是一款免费开源云笔记软件，允许用户在本地设备上建立私人服务器，实现数据安全和隐私性，但是还是有不少朋友不知道如何本地自建蚂蚁(leanote)笔记，今天小2025-06-24还能在Excel中直接编辑! DeepSeek配合Mermaid生成图表的技巧
今天跟大家分享下我们如何使用DeepSeek与Mermaid来实现快速的生成图表，操作也非常的简单，只需要准备好自己的数据源即可，还可以在excel中修改哦2025-06-24deepseek各版本有什么区别? DeepSeek各版本说明与优缺点分析
本文将详细介绍DeepSeek的各版本，从版本的发布时间、特点、优势以及不足之处，为广大AI技术爱好者和开发者提供一份参考指南2025-06-20
最新评论