“滚动变体”(Scroll Variants) 允许您在页面上进入视口的部分上更改组件的活动变体。...您可以使用“滚动变体”使导航栏在用户向下滚动页面时更改其外观,例如更改其背景颜色或调整元素的位置。或者在向下滚动页面时突出显示活动部分的侧边栏。...触发的时机呢,就是ViewPort, 视口的顶部,中部,底部到达浏览器窗口的顶部
触发次数: 重复重复,即滚动下去触发一次, 滚动上去也依然会触发一次.
To状态,组件的变化....Demo2: 实现一个滚动到不同部分,更改左侧的icon图标
效果:
在上个效果的基础上,我添加了
渐变背景
填充了文本,并使用绝对定位固定到页面上.
给每个页面添加了 粘性布局, 达到视差的效果....然后就说下创建变体Icon 图标. 观察上方的Gif图片,我们就会发现,滚动到不同部分.右边的ICON 图标 在进行相应的变化.