根据当前的自我状态使用$衍生

Question

当基于

threshold

位置修改粘性标题的高度时，如果滚动停止到接近阈值，则动画可以无限循环，因为收缩标题本身会减少

yScroll

的值，从而触发它再次生长（等等）。我通过仅在超过阈值（包括缓冲区值）时触发动画来解决问题。虽然下面的代码工作正常，但我找不到按照建议使用

yScroll

代替

$derived

的方法。这个问题可以用

$effect

解决吗？我是否正确地处理了这个问题？$derived

Answer 1

<script lang="ts">
    let yScroll = $state(0);
    let threshold = 50;
    let buffer = 40;
    let isShrunk = $state(false);

    $effect(() => {
        if (!isShrunk && yScroll >= threshold + buffer) {
            isShrunk = true;
        } else if (isShrunk && yScroll <= threshold - buffer) {
            isShrunk = false;
        }
    });
</script>

<svelte:window bind:scrollY={yScroll} />

<header class="transition-all duration-500 {isShrunk ? 'h-16' : 'h-32'}">Header</header>

不是正确的工具。

如果您描述逻辑更改之前和之后发生的事情，这应该会变得更加明显：

之前：“标题缩小

同时

滚动偏移量小于阈值” 之后：“当滚动偏移跨过上边界时，标题缩小
，当滚动偏移跨过下边界时，标题被扩展。 前者描述了一致的条件，后两个必须检测到的离散事件。

如果您不喜欢

$derived

（我想说这在这里很好），您也可以使用

$effect

 事件来代替。

scroll

<svelte:window on:scroll={onScroll} /> 虽然该函数可能需要调用一次，但如果初始状态为关闭。