Axure RP官方教程翻译(17):滚动激活固定的头部文字

STEP 1:设置

打开培训文档中的“Scroll-activated sticky header”。

这个页面包括了一个组叫做“Scrolling header”。

右键单击这个组,复制它,然后将它到页面的顶部,设置它的坐标为(20,20)。将它命名为“Sticky header”。

右键单击“Sticky header”将它转化为动态面板。将其依然命名为“Sticky header”,然后隐藏它。

Axure RP官方教程翻译(17):滚动激活固定的头部文字

STEP 2:固定Sticky header

  • 依然选中Sticky header,切换到属性标签栏下,点击“固定到浏览器”。
  • 点击复选框“固定到浏览器”。
  • 在横向固定方向上选择“左边”。
  • 在垂直固定方向上选择“顶部”。
  • 点击确定关闭对话框。

Axure RP官方教程翻译(17):滚动激活固定的头部文字

STEP 3:添加交互来显示Sticky header和隐藏“Scrolling header”

  • 点击画布空白区域切换到页面的审查面板。
  • 在属性标签栏,双击“窗口滚动”来创建一个新的窗口滚动实例。
  • 在实例编辑器的顶部,点击“添加条件”。
  • 在第一个下拉选项,点击“值”。
  • 点击临近第二个区域旁边的fx按钮。
  • 点击该区域的顶部的“插入变量或功能”。
  • 点开“窗口”部分的下拉列表选择“Window.scrollY”.
  • 点击确定关闭对话框。
  • 在条件创建器,点击中间的下拉选框,选择“大等于”。
  • 保留下一个下拉列表的值为“值”。
  • 在最后一个区域,清除文本输入数字180.
  • 点击确定关闭条件创建器。
  • 在实例编辑器的左边栏,点击“显示”。
  • 在右边栏,点击“Sticky header”动态面板。
  • 在左边栏,点击“隐藏”。
  • 在右边栏,点击“Scrolling header”组
  • 点击确定关闭实例编辑器。

Axure RP官方教程翻译(17):滚动激活固定的头部文字

STEP 4:添加交互来显示Scrolling header和隐藏“Sticky header”

  • 在属性标签栏下,双击“窗口滚动”来添加第二个窗口滚动实例。
  • 在左边栏,点击“隐藏”。
  • 在右边栏,点击“Sticky header”。
  • 在左边栏,点击“显示”。
  • 在右边栏,点击“Scrolling Header”。
  • 点击确定关闭实例编辑器。

Axure RP官方教程翻译(17):滚动激活固定的头部文字

STEP 5:预览

点击预览

尝试向下滚动页面,Sticky header会显示,然后窗口向上滚动直到它消失。

本文来自Axure.com,经授权后发布,本文观点不代表产品狗立场,转载请联系原作者。

发表评论

登录后才能评论

This site uses Akismet to reduce spam. Learn how your comment data is processed.

联系我们

 

QR code