axure如何页面滑动时广告位上移_axure左右滑动效果 axure制作：页面上下滑动时菜单栏的浮动天花板效果...

在移动页面上，当您手动向上和向下滑动时，如果向上滑动超过一定量sketch素材，菜单栏会产生天花板效果。如何使用axure实现它？

当作者最近在手机的移动终端上时，有一个动画，希望达到这种效果：当您手动上下滑动页面时，当向上滑动超过一定量时，菜单栏可以具有天花板效果。我相信我无需多说这种效果。我应该理解，但是如何使用axure实现呢？

因为我不会，所以我先阅读了在线教程，但是在线教程都是在网页上滚动的。坦白地说，它们都是在PC端的交互效果。

当然，如果您是新手，请拖出一个动态面板并显示滚动条，可以轻松实现滚动效果，然后将菜单栏设置为超过一定的滚动距离，天花板可以是。

如果滚动距离没有超过一定范围，则只需保持原始位置即可。这里的主要设计是scrollY函数(滚动页面时使用的windows.scrollY函数)。

(单击动态面板的属性栏)

(您可以尝试一下，当动态面板添加此滚动条时，您可以自己实现内容的滚动效果)

之前的内容是针对所有人的在线教程，然后我将讨论我制作的应用程序侧页面的上下拖动效果。

我将以Lagou.com为例。有关详细信息，请参阅Lagou应用程序的主页。

准备材料：

1.移动材料：不用说，这就是我们的框架

2.动态主面板：您可以通过手动滑动的屏幕来了解它

3.滑动面板：内容托管面板，将完整的内容放在此面板中

4.菜单栏：

为菜单栏准备两个副本。您可以看下面的图片。记住要准备完全相同的两份副本，一份放置在滑动面板中，另一份放置在滑动面板外部(将图层顶部放置sketch素材，默认情况下为隐藏)，您可以查看图中的层次关系。

滑动面板内容准备

5.使用的函数：this.y(组件的纵坐标

了解所有准备材料后，下一步就是开始我们的交互式设置：

1.首先，我们必须确保在用鼠标拖动主面板时，内容可以上下滑动。此步骤非常简单：找到主面板组件-垂直拖动时拖动-移动-滑动面板-拖动，设置完成，您可以预览它，现在是否可以随意上下拖动内容。

2.第二步，我们现在必须在脑海中做出逻辑判断：因为滑动面板中菜单栏的y坐标为281(我自己设置)，所以当向上拖动距离更大时大于281时，菜单栏是否具有天花板效果？当向上拖动距离小于281时，菜单栏应位于哪个位置？

如何反映我上下拖动的距离？那就是使用我们前面提到的“ this.y”函数，该函数指向组件的y坐标轴。您是否注意到滑动面板的坐标轴为(0，0)axure左右滑动效果，这表示此处组件的坐标是根据相对位置计算的，该相对位置位于主面板中。再次，同样，滑动面板中的组件都重新放置在滑动面板下方。

滑动面板坐标

因此，菜单栏在滑动面板中的位置为(7,281)，这意味着当滑动面板的滑动距离大于281时(当滑动面板.y ==-281时) ，“菜单”是隐藏的“列复制”，下一步是设置过程：

设置滑动面板

设置滑动面板

不符合设置时隐藏菜单栏

然后，设置后axure组件，每个人都可以预览效果。非常简单你学到了吗？