照例，先看实现效果。左边是滚动时标签吸附在顶部，底部滑出评论输入框。右边是多个标签的吸附效果。

这里用到的就是动态面板中的滚动时交互时间，以及scrollY变量。scrollY记录了动态面板中内容在数值方向上滚动的距离，通过对scrollY的大小进行判断，对指定的标签进行显示或者隐藏操作，即可实现上图中所示的吸附效果。下面我们首先介绍一下动态面板的滚动功能和scrollY的值。

动态面板的滚动功能和scrollY

动态面板的自身的大小可以设置为“自动调整为内容尺寸"，就是说动态面板中的内容尺寸是多大，动态面板的尺寸就是多大。如果我们不勾选这个选项，当动态面板中的内容比面板自身要大的时候，我们在动态面板上右键，就可以设置滚动条，这样就可以通过滚动查看面板内的全部内容。

在面板中的内容滚动的时候，面板的scrollX和scrollY就会记录滚动的距离，scrollX记录水平滚动的距离，scrollY记录垂直滚动的距离，下面我们通过一个例子加深理解（附件中有demo)

从中可以看出，初始状态scrollX和scrollY的值均为0，scrollX在向右滚动时增大，向左滚动时减小，scrollY在向下滚动时增大，向上滚动时减小。

现在我们再来看第一种效果，

1）首先我们拖入一个动态面板，然后在内部添加标签和内容，记住标签在面板中的y坐标为150；

2）复制标签，在动态面板外部，我们希望标签吸附的位置粘贴，如下图，我们希望在顶部进行吸附，所以在顶部粘贴标签，然后将其隐藏。

3）设置交互，为动态面板增加一个滚动时的交互时间，当scrollY大于等于150时，显示外部的那个隐藏标签，否则就隐藏。这样在滚动时，当面板内部的标签到达顶部时，外部的隐藏标签就显示出来，形成了标签的吸附效果，当 scrollY小于150时，外部的标签被隐藏，我们看到的就是随面板滚动的内部标签。150的临界值就是面板内部标签的y坐标值。

4）有了以上的基础，下面制作评论框的滑出效果就很简单了。在面板外部的底部绘制一个输入框组件，然后隐藏，

然后添加滚动时时间，设置判断条件，scrollY滚动到什么时候才显示评论框，可以根据需要确定。在显示和隐藏评论框的时候，增加了一个上滑和下滑的动画效果，让其出现和隐藏更为平滑。

要注意的时，最后需要将case 3的判断从else if切换为if，这样case 3和case 4组成一个单独的判断组合，和前面的case1和case2不会冲突。否则从case1到case4将是一个判断组合，case1执行了，会导致后面的判断均不再执行。

最后就是第二章动图中的多个标签的吸附的实现，其实实现原理是一样的，在面板内部绘制好内容和标签，然后将标签全部复制一份放到外部的吸附位置，然后全部隐藏，然后添加滚动时间，每一个标签设置一个判断组，当滚动到触发位置的时候设置隐藏。

其中有一点需要注意，由于是多个标签，所以我们希望在下一个标签滚动的指定位置的时候，上一个标签是处于隐藏状态的，因此判断需要显示标签时的scrollY值用的是一个范围。比如第一个标签在0<scrollY<=280的时候才显示，超过280的时候隐藏，因为此时第二个标签的顶部已经接触到第一个标签了。这里设置的是280是第二个标签的y坐标350减去了第一个标签的高度70的到的值。这样我们看到的效果就是，第二个标签的顶部触碰到第一个标签吸附位置的底部时就将第一个标签隐藏。

具体步奏大家可以结合案例进行学习。