其实有很多种不同的方法来做到这一点。
做pc站时最为简单的方法是把导航部分转换成动态面板,然后右键选择固定到浏览器,选择固定到顶部即可。这样就轻松实现了。
移动端的简单方法是把导航以下部分的内容转化为动态面板并设置其高度为手机高度减去导航条高度,然后右键选择滚动条,并设置为自动显示垂直滚动条即可完成设置。
如果导航条起初不再顶部,页面滚动到指定位置后固定到顶部的方法如下:
首先,页面内容的上下滑动,只需要将相应内容放入动态面板,并在该动态面板属性中添加垂直滚动条即可。这样,当我们在手机上打开原型时,即可通过手指的拖动而上下滑动。动态面板的滚动条必须设置,但在手机浏览器中并不会出现滚动条。
先准备元件。
页面中放入元件内容。分别是1个广告图片,3个制作菜单的矩形,1个三级标题和文本段落,1张海报。把3个制作菜单的矩形,按着Ctrl键依次点击选中,然后,点击上方功能区中的【组合】图标或者快捷键<Ctrl+G>组合到一起,并命名为“导航条”,导航条必须设置为顶层。最后,全选这些内容,点击鼠标右键,在菜单中选择【转换为动态面板】。(图4)
补充:转换为动态面板后,要把动态面板设置成上方提到的尺寸,例如320*568,并且,动态面板动态面板里面的内容超过动态面板的高度,否则不会出现滚动条。
2、在动态面板的属性中,设置动态面板【自动显示垂直滚动条】。
3、为动态面板添加交互。
一共包含2个用例(Case):
用例1:对动态面板滚动距离是否超过97进行判断,设置条件【值】【[[T]]】【>=】【值】【97】。系统变量“This”表示当前元件,“scrollY”表示滚动距离。
当符合以上条件时,我们需要【移动】菜单“导航条”,【到达】x轴“0”/y轴“[[T]]”的位置。“[[T]]”就是动态面板内容滚动的距离,也就是动态面板内容滚动时,上边缘那一线内容的y轴坐标位置。在动态面板内容滚动时,将菜单“导航条”移动到这个位置,就是将它时时移动到动态面板上边缘的位置,也就是顶部吸附效果。
用例2:当不符合用例1的条件时,也就是动态面板内容的滚动距离小于150的时候,我们需要再填加一个用例2,即不符合条件的情形,并设置动作【移动】菜单“导航条”,【到达】x轴“0”/y轴“150”的初始位置。
以上就是实现的全过程了。