百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

Axure教程:页面滚动时导航菜单始终可见

xsobi 2024-11-24 23:32 19 浏览

如何让页面的导航菜单在滚动时也可见呢?笔者以此为需求,讲解了如何用Axure实现这个需求。

不知大家在某东官网买书浏览网页的时候,有没有发现这样一种很有趣的现象:在书籍详细页面,页面最上面一般是展示图书相关图片以及价格等信息,再往下就是图书更详细的信息。通常会有这4部分内容分别以Tab页签的形式展示,如商品介绍,规格包装,售后保障以及商品评价。

每类的详细信息都比较多,当我们想要了解更多信息的时候,我们就会向下滚动鼠标,正常来说滚动的距离超过页签原本高度的时候,这4个Tab页签就会消失不见的。但是我们会发现:这4个Tab页签始终可见并且始终的页面的最上面。

来来来,我们先看一下效果:

大家想不想知道用Axure来怎么实现这种效果呢?下面就跟大家分享一下~

下面将从3个方面展开:

需求分析

通过上面的描述,相信大家比较了解需求了。话不多说,我们再来梳理一下需求,深入分析需求。

这个需求可以浓缩简化为以下:页面某些中菜单栏,在鼠标滚动的距离超过其原本高度的时候仍在界面显示,并且显示在页面的最上面。

浓缩为Axure语言就是:鼠标滚动的距离超过某元件原本高度的时候仍在界面显示,并且显示在页面的最上面。

看到这里,大家是不是会想到Axure中的动态面板呢?

对,没错,实现核心就是用到动态面板及函数。

Axure关键点分析

下面为Axure中的关键点分析:

4个Tab标签用到的动态面板

页面滚动的距离

这个案例中涉及页面的滚动,页面滚动时仍需要判断页面滚动的距离,当页面滚动的距离大于等于动态面板的原本高度时,则将其移至页面最上面即当前的页高度,这里是绝对距离;否则不移动。

判断页面的高度,需要用到窗口高度函数, [[Window.scrollY]];4个标签动态面板的y坐标轴为400。

满足这个条件,则将动态面板移至当前页面高度的地方,注意是绝对距离。

效果展示

最后,我们来看看最终的效果,网址为 https://3djl4z.axshare.com。

感谢小伙伴们的阅读~

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

题图来自Unsplash,基于CC0协议

相关推荐

淘宝后台怎么设置微信支付方式,如何操作?

一、登录淘宝商家后台首先,打开淘宝商家后台的登录页面,输入用户名和密码进行登录。如果没有注册淘宝商家账号,可以先进行注册,注册成功后再登录。二、进入“支付设置”页面登录成功后,点击页面右上角的“设置”...

CMS系统是什么?(cms包括什么)

CMS系统指的是“内容管理系统”,是用来发布网络内容的一体化Web管理系统。CMS系统主要有两类功能,一类是搭建网站,另一类是用来管理和发布内容。...

后台首页应该如何设计?(店铺首页设计图片)

在设计之前,尽可能进行用户访谈,深入每个角色的场景,分析其业务重点和痛点,了解每个客户角色对产品的期望。1)梳理业务和功能架构主页和导航共同构成了产品的外观。在设计首页之前,需要完成业务和功能架构设...

今日头条MCN.登录电脑端头条号后台,功能使用管理

明日头条MCN也叫父子号或则矩阵是指有能力管理一定规模头条号账号的机构,内容包括微头条、图文、短视频等体裁。平台希望凭着对MCN机构规范化的管理,共同构建出一个良性、活跃的内容生态,与更多领域的MCN...

家里的WiFi被蹭了,咋办?(家里被蹭网了)

某一天在家中上网...

AI销售数据分析神器 + 超强推理模型

这款AI销售数据分析工具通过自动化分析和推理模型,快速生成详细报告,帮助销售团队精准定位问题、发现亮点,优化策略。无论是产品分析、地区对比还是成本结构,它都能提供全面洞察和可执行建议。干销售,最头疼啥...

大学宿舍上网问题解决方案,让你上网更稳定更快捷!

大学宿舍上网是许多大学生关心的问题,一直以来都存在着网速慢、不稳定等困扰。但是,只要采取正确的解决方法,大学宿舍上网问题就可以迎刃而解。一、了解宿舍网络环境在解决宿舍上网问题之前,我们需要了解宿舍的网...

剑灵2台服卡界面、卡加载界面、卡登录界面的解决方法

《剑灵2》是一款大型多人在线角色扮演游戏,在《剑灵2》中,过去的英雄将成为传说,玩家将承接后面的全新探险,将谱写《剑灵》的全新篇章。该游戏上线以来,许多玩家小伙伴已经纷纷下载游玩,但是有不少玩家在游玩...

SOLIDWORKS PDM库设定冷存储模式(solidworks保存p2d格式)

众所周知SOLIDWORKSPDM作为管理企业研发数据的工具,不但帮助企业集中管理了研发数据,也记录了企业产品的研发过程即文件的版本。...

这个软路由系统自带NAS和应用商店:iStore OS,降低软路由门槛!

开篇碎碎念大家好,相信不少朋友都听过软路由,甚至不少朋友已经玩上了软路由,原版软路由系统上手还是有一定难度的,所以本期来介绍和体验一个基于OpenWRT改版而来的易用的软路由系统:iStoreOS。...

Windows RDP远程桌面登录(mstsc)卡死显示请稍候的画面的解决办法

WindowsRDP远程登录(mstsc)卡死一直等待变成请稍候(PleaseWait)的画面如何解决。相信很多人都遇到过,但搜索国内所有网站,均没有一个根本性的解决方案,很多都是答非所问。都不能...

手把手教您登记公共数据资源(公共数据是什么)

3月1日,国家公共数据资源登记平台(https://sjdj.nda.gov.cn)正式上线。您可通过以下5个步骤开展登记工作:1.注册登录登录国家公共数据资源登记平台官网后,点击右上角【注册】或【我...

获取微信小程序页面路径(如何获取微信小程序路径)

登录小程序后台(https://mp.weixin.qq.com/),在顶部导航栏的“工具-生成小程序码”可进入小程序页面路径默认显示首页路径,用户可获取该小程序更多页面路径。...

SaaS系统框架搭建详解(saas软件开发框架)

SaaS系统能提供一个或者多个行业常见场景的功能支持,只要在有网络的情况下,便“随处可用、拿来即用、不用下载”,所以现在也是一个流行的趋势。本文介绍了SaaS系统的框架搭建,一起来学习一下吧。根据百度...

暗黑4XGP卡在载入界面、登录界面卡住、登录不上去有效解决

想要以更低的价格体验到暗黑破坏神4的好玩之处,那么你可以选择加入XGP。近日,该游戏更新了“炼狱大军”赛季,这几天总有玩家遇到暗黑4XGP卡在载入界面、登录界面卡住、登录不上去的困难。下面就由小编和迅...