很实用的干货｜浮动固定菜单与楼层导航实践

honghu2

很适用的干货｜浮动固定菜单与楼层导航实践

今天，咱们连系浮动固定菜单栏和楼层导航，实现统一界面内的锚点定位。

想必不少人已见过浮动固定菜单和楼层导航的案例，浮动固定菜单的场景很是的常见，人人都是产物司理的产物司理导航（）就是一个典范的浮动固定菜单的场景，当窗口向下转动跨越必定间隔时，菜单栏固定在阅读器窗口的最上方：



当一个页面内容较多时，咱们又常常以楼层的方法快速导航，而且在页面的右下角有一个返回到顶部的按钮。草莓单击对应的楼层按钮，快速定位到该楼层，这在一些电商网站中呈现较多，比方京东网首页：



今天，咱们连系浮动固定菜单栏和楼层导航，实现统一界面内的锚点定位，完成后的结果图以下：



单击这里检察在线演示

从这个例子里，咱们可以把握的常识点有以下几个：
关于动态面板“固定到阅读器”属性的利用浮动固定菜单栏的设置技能转动到元件动作的利用窗口转动时事务的处置主动顺应窗口宽度的设置1、界面结构一、题目栏
添加一个无边框灰色矩形框，巨细1250*66，定名title，位置在（0，80），摹拟菜单栏。

复制这个矩形框，定名为menu，摹拟位于顶部的浮动固定菜单，位置在（0传说新闻网，0）右键转换为动态面板，定名为float_title，右键设置次序为置于顶层，完成后的结果以下：


二、楼层导么么直播航按钮
添加一个矩形框，巨细80*50，双击设置文字为“一楼”，右键设置交互样式鼠标颠末时填充色为深灰色：



再设置选中状况的样式为蓝底白字：



复制这个按钮7个，别离点窜文字内容为“二楼”到“八楼”，自上而下次序分列：



给8个按钮别离定名button1到button8，选中这8个矩形，右键设置选项组为buttons：



然后再右键转换为动态面板，定名为float_panel，放在（0,475）处。
三、楼层内容
咱们利用大的矩形块来摹拟每个楼层，添加一个矩形框，巨细900*220，双击设置文字内容为“一楼”，定名为floor1，复制floor1统共7个（复制这么可能是让窗口在垂直标的目的有足够多的楼层，让页面呈现垂直转动条），修更名称别离为“二楼”到“八楼”，挨次从上到下分列，间距设置为60。选中这8个矩形，右键转换为动态面板，定名为floors，放在（160,185）处，完成后的结果图以下：


四、返回顶部按钮
添加一个矩形，巨细70*60，右键转换为动态面板，定名为back_top，挪动（1100,754）处，完成后的结果图以下：



在初始状况下，顶部浮动固定菜单栏和回到顶部按钮是不成见的，只有在窗口向下转动必定间隔后才呈现，是以咱们先将这两个动态面板暗藏起来（浅黄色部门是暗藏的动态面板）：



到这里咱们已完成示例中所有的结构部门，下面来起头处置事务。
2、动态面板属性设置
有几个动态面板的“固定到阅读器”属性必要设置一下，以便于在显示时能依照设置的属性显示。

顶部菜单栏的“固定到阅读器”属性：程度居中，垂直居上



左边楼层导航按钮的“固定到阅读器”属性：程度居左，垂直居中



返回顶部按钮的“固定到阅读器”属性：程度居右，边距20，垂直居下，边距20


3、事务处置
这里包含如下几个事务必要处置：
一、页面载入时事务
为了界面加倍美概念，在页面初始化事务里，咱们将菜单栏设置和当前窗口同样的巨细，将楼层内容的巨细设置为比窗口宽度小一点而且居中显示。

由于有8个楼层，咱们经由过程一个全局变量来设置一下值，所有楼层宽度减去这个值，设置同一宽度，全局变量名为distance，默许值为400：



在页面空缺处点击，在右边属性里给页面添加页面载入时事务：


添加页面载入时事务先显示左边的楼层导航动态面板设置菜单栏title和暗藏的浮动菜单栏的menu的巨细，宽度为窗口宽度Window.width，高度66连结稳定设置8个楼层的宽度为窗口宽度关于distance值，即[[Window.width-distance]]，高度连结不变成220。挪动8个楼层地点的动态面板位置在程度中心位置经由过程变量设置楼层的程度位置添加局部变量LVAR1，指向楼层地点的动态面板程度位置计较方法为[[(Window.width-LVAR1.width)/2]]，即窗口宽度减去楼层宽度再除以2二、窗口转动事务
窗口在转动起过题目栏的位置后，显示浮动固定菜单栏和返回顶部按钮：


添加窗口转动时事务添加前提，若是窗口转动间隔Window.scrollY>=80则显示浮动固定菜单栏和回到顶部的按钮触发节制按钮control的单击事务（见后面阐明）
不然就暗藏浮动固定菜单栏和回到顶部的按钮：



添加个热门区域control，巨细10*10，添加单击事务，果断窗口转动位置，设置对应按钮为选中状况：


三、楼层导航按钮单击事务
给楼层导航的第一个按钮添加单击事务，单击后转动元件到楼层floor1，共同线性动画：


选择导航一楼按钮添加鼠标单击事务设置转动到元件动作选择转动到floor1设置仅垂直转动，共同线性动画设置当前按钮为选中状况
其它7个按钮挨次选择转动到floor2到floor8。
四、回到顶部单击事务
回到顶部按钮事务与导航按钮事务不异，只是转动到题目栏title：


4、F5预览
所有结构和事务都已处置完成，可以F5预览一下看看结果了！

源文件下载地点：

若是感觉有帮忙就赞一下哦^_^

本文由 @原型设计工厂 原创公布于人人都是产物司理。未经允许，制止转载。