Figma创建sticky效果

figma是一个设计工具，可以进行原型设计或者动效展示。 今天我们尝试使用figma来创建sticky效果，即随着鼠标滚动隐藏某些组件。

准备原型

我使用之前为了尝试用的模版进行后续创建。称为原型1。

全选当前frame的所有组件，进行复制，复制后把需要隐藏的部分选择为透明显示。

完成后复制页面展示效果：

之后为了展示固定部分的页面效果需要选取固定的组件group，并进行fixed：

我们把固定的组件挪到页面的顶端，实现顶端固定显示的效果。称为原型2。

动作设置

这样我们文件素材就准备好了，开始进行prototype的配置。

为了能够模拟实际的展示效果，我们需要设计我们的动作的触发器；可以看出sticky效果实际是滚动后消失部分组件；所以我们选择使用mouse enter[^1]的触发器来实现效果。

首先选择我们鼠标需要进入的区域，进去该区域后就会就行组件的消失效果，从鼠标滚动后变化的位置开始选择后面的组件，进行group，

进行原型设计，选择透明后的组件，使用mouse enter触发器。

然后为了能够模拟实际场景，鼠标上滑应该显示之前消失的组件，所以我们按照之前的设计，反向操作一遍。在原型2中选择除了消失组件和之前group的组件外的其他组件，group，

使用mouse enter触发器，返回原型1。

最后我们使用figma的present进行查看。可以看到顶部图片banner消失并置顶固定了一行tab。

[^1]: Mouse Enter 这允许在鼠标移入热点区域时显示目标框架，这类似于 While Hovering Trigger 的工作方式; 但与 While Hovering Trigger 不同的是当用户将鼠标移动到热点之外时，用户不会自动返回到原始框架。 这对关闭按钮很有用。