Svelte粘性导航栏滚动时scrollY异常闪烁及过渡问题求助

问题核心 #

滚动切换导航栏高度时，导航栏自身高度变化会影响页面的scrollY值，触发切换条件反复生效，导致导航栏在大小状态间闪烁；同时用Svelte的fade过渡会让两个导航栏短暂同时显示，出现视觉重叠；换成scrollY == 0判断又因为平滑滚动，顶部scrollY不总是0，问题依旧。

正确实现思路 #

1. 避免DOM元素切换：不用两个独立的<div>分别对应大小状态，而是用单个容器，通过切换类名来改变样式，这样不会因为DOM增删导致页面布局波动，也就不会影响scrollY值。
2. CSS过渡替代组件过渡：用CSS的transition属性实现导航栏的平滑收缩/展开，比Svelte的fade过渡更适配这种高度变化场景，还能避免元素重叠。
3. 加入滚动阈值缓冲：设置上下滚动的不同阈值，防止滚动时因微小的scrollY波动触发状态反复切换。

修改后的代码实现 #

<script lang="ts">
    import { onMount } from 'svelte';

    let isSmall = false;
    let lastScrollY = 0;
    // 定义切换阈值，可根据导航栏高度差调整
    const shrinkThreshold = 50;
    const expandThreshold = 10;

    function handleScroll() {
        const currentScrollY = window.scrollY;
        
        // 向下滚动超过阈值时缩小导航栏
        if (currentScrollY > lastScrollY && currentScrollY > shrinkThreshold && !isSmall) {
            isSmall = true;
        }
        // 向上滚动到阈值内时恢复导航栏
        else if (currentScrollY < lastScrollY && currentScrollY < expandThreshold && isSmall) {
            isSmall = false;
        }
        
        lastScrollY = currentScrollY;
    }

    onMount(() => {
        window.addEventListener('scroll', handleScroll, { passive: true });
        return () => window.removeEventListener('scroll', handleScroll);
    });
</script>

<style>
    nav {
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 100; /* 确保导航栏在最上层 */
    }

    .menubar {
        display: grid;
        column-gap: 2.25em;
        grid-template-columns: repeat(3, 1fr);
        padding: 1.5em;
        transition: padding 0.3s ease; /* 用padding过渡实现高度变化 */
    }

    .menubar.small {
        padding: 0.5em;
    }

    .menubarElem {
        display: flex;
        align-items: center; /* 保持子元素布局稳定 */
    }

    .center {
        justify-content: center;
    }

    .right {
        justify-content: flex-end;
    }
</style>

<nav>
    <div class={`menubar ${isSmall ? 'small' : ''}`}>
        <div class="menubarElem left">
            <ThemeSwitcher></ThemeSwitcher> 
        </div>
        <div class="menubarElem center align-self-end">
            <slot name="pagelinks"/>
        </div>
        <div class="menubarElem right">
            <DateTime></DateTime>
        </div>
    </div>
</nav>

关键优化点说明 #

• 单个容器切换类名：避免了DOM元素的创建和销毁，不会因为布局变化影响scrollY值，从根源解决闪烁问题。
• CSS过渡：通过padding的过渡实现高度变化，平滑且不会出现两个导航栏重叠的情况。
• 滚动方向+阈值判断：只有当向下滚动超过shrinkThreshold时才缩小，向上滚动到expandThreshold内才恢复，防止微小滚动触发状态切换。
• 被动监听滚动：{ passive: true }提升滚动事件的性能，避免页面卡顿。

内容的提问来源于stack exchange，提问作者Aninsi Sasberg