Axure怎么制作頁面滾動時菜單固定在頂部的頁面？
我要評論Axure可以制作出保真度相當高的原型，除了頁面布局、UI以外，其強大的交互設計能力讓這些本來靜止的元素高效交互起來，形成以假亂真的高保真原型。本文介紹如何做一個在滾動中將菜單固定在頂部的頁面，屬于中級Axure案例。本文旨在展示交互效果，不對頁面具體內容和UI進行設計。
1、制作頁面
為了體現(xiàn)效果，我們需要做一個比較長（高）的頁面，在Axure工作區(qū)中拖入4個矩形，分別為頂部標題、菜單、頁面內容、底部。設置矩形寬度和高度，讓其看起來像是一個頁面布局。
2、制作隨頁面滾動的標題
為了讓效果更加明顯，我們將標題進行區(qū)別設置，設置矩形背景色為黃色，你也可以通過設置其他屬性來進行區(qū)別。將標題命名為“標題1”。
3、制作固定的標題
滾動中固定在頂部的標題并非頁面上的標題，是單獨制作的。復制“標題1”，將復制的標題命名為“標題2”，設置“標題2”x坐標等于“標題1”的x坐標，y坐標等于0。修改“標題2”背景色為藍色。
4、制作固定的標題
右鍵單擊“標題2”，點擊“轉換為動態(tài)面板”，將動態(tài)面板命名為“固定菜單”，在元件屬性與樣式中點擊“固定到瀏覽器”勾選“固定到瀏覽器窗口”，完成后隱藏動態(tài)面板。
5、制作固定錨點
在工作區(qū)中拖入一個動態(tài)面板，設置其x和y坐標等于0，調整其寬度和高度分別為60和20，將動態(tài)面板命名為“固定錨點”，設置其固定到瀏覽器。
6、制作滾動錨點
在工作區(qū)中拖入一個熱區(qū)，設置其x坐標等于0，y坐標等于“菜單1”的y坐標加上固定錨點的高度，設置其寬度等于固定錨點的寬度，高度直接拖動到頁面底部，命名為“滾動錨點”。
7、設置交互
打開頁面交互面板，雙擊“窗口滾動時”事件，添加條件“元件范圍 滾動錨點 接觸到 元件范圍 固定錨點”，確定，設置動作為“顯示 固定菜單”。
8、設置交互
繼續(xù)在“窗口滾動時”事件上添加動作，添加條件“元件范圍 滾動錨點 未接觸 元件范圍 固定錨點”，確定，設置動作為“隱藏 固定菜單”。
9、預覽效果
至此，所有設置均已完成，按F5進行預覽吧。
相關文章
FC模擬器如何自定義按鍵布局？FC模擬器又稱紅白機模擬器，讓玩家可以在電腦或其他設備上重溫經典游戲,自定義按鍵布局是使用模擬器時一項重要的功能，下面就為大家?guī)鞦C模2025-10-20
今天給大家介紹一下即夢ai生成圖片的具體操作，生成圖片分2種情形，一種是完全由文字生成圖片，另一種是根據(jù)參考圖生成圖片，今天我們先介紹上傳參考圖生成新圖的教程2025-10-02
復雜數(shù)據(jù)統(tǒng)計和分析不用煩! DeepSeek+豆包自動處理Excel數(shù)據(jù)真方便
AI時代來臨，表格處理變得如此簡單高效，簡直太方便了,尤其是復雜的數(shù)據(jù)統(tǒng)計和分析，幾分鐘就搞定，強烈推薦給大家試試2025-08-07
困擾大家20年難題被破解了! DeepSeek一鍵生成農歷函數(shù)附代碼
之前利用PQ通過獲取API來得到公歷對用的農歷，但是無奈效率太低了，現(xiàn)在利用DeepSeek一鍵生成農歷函數(shù)，分分秒解決困擾大家20年難題2025-08-01
Copilot插件怎么用? 解鎖AI助手的擴展功能的使用指南
Copilot是一款集成于操作系統(tǒng)和辦公軟件中的AI助手，該怎么使用Copilot插件呢？下面我們就來看看詳細介紹2025-07-28- 之前都是用思維導圖軟件做的員工手冊，現(xiàn)在想要提升工作效率，用DeepSeek制作，該如何操作呢？詳細請看下文介紹2025-07-15
利用AI工具提高B站學習效率! DeepSeek一鍵生成B站視頻筆記詳解
在B站學習視頻課程時，我們常常會遇到視頻節(jié)奏緩慢或內容冗長的問題，導致注意力難以集中，我們可以利用ai解決這個問題，做好內容筆記，詳細如下文所述2025-06-25
Windows系統(tǒng)本地自建螞蟻(leanote)筆記圖文教程
Leanote螞蟻筆記是一款免費開源云筆記軟件，允許用戶在本地設備上建立私人服務器，實現(xiàn)數(shù)據(jù)安全和隱私性，但是還是有不少朋友不知道如何本地自建螞蟻(leanote)筆記，今天小2025-06-24還能在Excel中直接編輯! DeepSeek配合Mermaid生成圖表的技巧
今天跟大家分享下我們如何使用DeepSeek與Mermaid來實現(xiàn)快速的生成圖表，操作也非常的簡單，只需要準備好自己的數(shù)據(jù)源即可，還可以在excel中修改哦2025-06-24deepseek各版本有什么區(qū)別? DeepSeek各版本說明與優(yōu)缺點分析
本文將詳細介紹DeepSeek的各版本，從版本的發(fā)布時間、特點、優(yōu)勢以及不足之處，為廣大AI技術愛好者和開發(fā)者提供一份參考指南2025-06-20
