天猫app-导航固定位置跟随窗口滚动

主要内容

在天猫APP中，窗口滚动到导航1时，导航1固定在浏览器的顶部，跟随窗口滚动，滚动到导航2时，导航2固定在浏览器的顶部，跟随窗口滚动，本课我们学习使用axure函数和页面交互事件来实现这个效果。

交互效果

1.窗口滚动到导航1位置时，导航1固定在浏览器的顶部，跟随窗口滚动。

2.窗口滚动到导航2位置时，导航2固定在浏览器的顶部，跟随窗口滚动。

一、原型制作

步骤1：

导入天猫频道首页的图片到编辑区，设置位置与大小，x:0，y:0，w:360，h:1570（因是范例，所以直接用图片代替）

步骤2：

导入导航1到编辑区，设置位置与大小：x:0，y:114，w:360，h:43（因是范例，所以直接用图片代替），命名：导航1

步骤3：

导入导航2到编辑区，设置位置与大小：x:0，y:512，w:360，h:44（因是范例，所以直接用图片代替），命名：导航2

二、设置页面“窗口滚动时”事件

步骤4：

用例1：双击页面交互下的“窗口滚动时”事件

第一步：编辑条件，选择“值”，点击后面的“fx”打开编辑文字窗口，选择窗口函数“Window.scrollY”，设置条件：[[Window.scrollY]]" ≥ "116"

第二步：选择“移动”

第四步：移动“导航1”到绝对位置，x:0,y:Window.scrollY

移动“导航2”到绝对位置，x:0,y:512

步骤5：

用例2：参考用例1，双击页面交互下的“窗口滚动时”事件，打开用例编辑器

第一步：编辑条件：设置条件：[[Window.scrollY]]" ≥ "512"

第二步：选择“移动”

第四步：移动“导航2”到绝对位置，x:0,y:Window.scrollY

移动“导航1”到绝对位置，x:0,y:114

选中用例2，选择“切换IF/ELSE IF”

步骤6：生成原型，预览效果

关于陪学网（www.pexue.com）：我们6年来专注于产品管理类课程的开发与制作，志在为产品经理、交互设计、平面设计、需求人员分享最新、最好的产品类课程。学员遍布国内外知名互联网产品团队：百度、新浪、腾讯、领英等