Tailwind实现移动端导航栏滚动隐藏文字动效及resize异常修复

核心问题说明 #

第一阶段问题：滚动上移导航栏优先裁切图标 #

你最初通过修改导航栏整体top值实现隐藏的思路有问题，位移整个容器会先裁切位于上层的图标，不符合只隐藏文字的需求。

第二阶段问题：桌面端切回移动端后动效失效 #

你仅在页面首次挂载时获取了导航栏文字元素和监听锚点，当窗口切换到桌面端时，移动端导航栏DOM被销毁，切回移动端后新渲染的DOM没有被重新绑定监听规则，导致动效失效。

修复方案 #

基础效果实现（避免裁切图标） #

不要移动导航栏整体，仅控制文字的显隐：

• 导航栏固定在顶部不位移，设置固定高度同时开启overflow: hidden
• 图标固定在导航栏上半区域，文字放在图标下方
• 滚动时通过过渡动画将文字的高度、行高、透明度、外边距都置为0即可，不会影响图标显示

窗口切换动效失效修复 #

1. 监听页面DOM更新事件，每次切换到移动端视图时，重新获取导航栏文字元素、重新绑定锚点监听
2. 缩小选择器范围，不要全局选择所有p标签，避免误操作页面其他内容
3. 完善折叠类的样式，避免文字残留占位

修复后核心代码 #

<script>
    import { onMount, afterUpdate } from "svelte";

    let onPhone;
    let tracker, navTexts;
    let sectionObserver;

    // 检测设备尺寸
    function checkIfOnPhone() {
        let width = window.innerWidth > 0 ? window.innerWidth : screen.width;
        onPhone = width < 426;
    }
    checkIfOnPhone();
    addEventListener("resize", checkIfOnPhone);

    const observerOptions = {
        rootMargin: "0px 0px 0px 0px",
    };

    onMount(() => {
        // 初始化交叉观察器
        sectionObserver = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (!navTexts) return
                entry.isIntersecting 
                    ? navTexts.forEach(p => p.classList.remove("collapse"))
                    : navTexts.forEach(p => p.classList.add("collapse"));
            });
        }, observerOptions);
    });

    // DOM更新后重新绑定移动端元素
    afterUpdate(() => {
        if (onPhone && tracker) {
            sectionObserver.disconnect()
            sectionObserver.observe(tracker)
            navTexts = [...document.querySelectorAll(".nav-btn-text")]
        }
    })
</script>

<style lang="postcss" global>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    @layer utilities {
        .navbar {
            position: fixed;
            width: 100%;
            background: #000;
            display: flex;
            justify-content: space-between;
            overflow: hidden;
        }
        .navbar-background {
            background-color: #000;
            position: fixed;
            width: 100%;
            height: 45px;
            z-index: 100;
        }
        .nav-btn {
            @apply text-white;
        }
        .nav-btn-mobile {
            @apply text-white flex flex-col items-center py-1;
        }
        .nav-btn-text {
            line-height: 1.5;
            overflow: hidden;
            transition: all 300ms;
            font-size: 0.8rem;
            height: 1.2rem;
            opacity: 1;
        }
        :global(.collapse) {
            line-height: 0 !important;
            height: 0 !important;
            opacity: 0 !important;
            margin: 0 !important;
        }
        #content {
            height: 3000px;
            background: lightblue;
            padding: 1rem 3rem;
        }
        #tracker {
            margin-bottom: 8rem;
        }
    }
</style>

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