如何在Blazor中根据滚动位置添加/移除元素类名

方案一：Blazor + JS互操作（兼容所有浏览器） #

如果之前尝试JS实现失败，大概率是事件监听绑定或回调逻辑有问题，以下是完整可运行的实现：

1. 编写JS滚动处理函数 #

在wwwroot/js/scrollHandler.js中添加：

window.scrollHandler = {
    init: function (elementId, dotNetRef) {
        const element = document.getElementById(elementId);
        // 绑定滚动事件，避免重复绑定
        const scrollCallback = () => {
            const scrollTop = element.scrollTop;
            dotNetRef.invokeMethodAsync('OnScroll', scrollTop > 50);
        };
        element.addEventListener('scroll', scrollCallback);
        // 存储回调以便销毁时移除
        element._scrollCallback = scrollCallback;
    },
    destroy: function (elementId) {
        const element = document.getElementById(elementId);
        if (element._scrollCallback) {
            element.removeEventListener('scroll', element._scrollCallback);
            delete element._scrollCallback;
        }
    }
};

2. Blazor组件实现 #

以布局组件MainLayout.razor为例：

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<div id="scrollContainer" class="scroll-container" style="height: 100vh; overflow-y: auto;">
    <div class="top-banner @(IsScrolled ? "banner-hidden" : "")">顶部横幅内容</div>
    <nav class="menu-bar @(IsScrolled ? "menu-sticky" : "")">菜单栏内容</nav>
    
    <!-- 页面主体内容 -->
    <div class="content" style="height: 2000px;">滚动测试内容...</div>
</div>

@code {
    private bool IsScrolled { get; set; }
    private DotNetObjectReference<MainLayout>? _dotNetRef;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _dotNetRef = DotNetObjectReference.Create(this);
            await JSRuntime.InvokeVoidAsync("scrollHandler.init", "scrollContainer", _dotNetRef);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    [JSInvokable]
    public void OnScroll(bool isScrolled)
    {
        if (IsScrolled != isScrolled)
        {
            IsScrolled = isScrolled;
            StateHasChanged();
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (_dotNetRef != null)
        {
            await JSRuntime.InvokeVoidAsync("scrollHandler.destroy", "scrollContainer");
            _dotNetRef.Dispose();
        }
    }
}

3. 配套CSS样式 #

.top-banner {
    height: 50px;
    background-color: #f5f5f5;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.banner-hidden {
    height: 0;
    padding: 0;
    overflow: hidden;
}

.menu-bar {
    height: 60px;
    background-color: #2c3e50;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 20px;
    transition: all 0.3s ease-in-out;
    position: relative;
}

.menu-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

.scroll-container {
    position: relative;
}

.content {
    padding-top: 110px; /* 预留横幅+菜单初始高度，避免内容被遮挡 */
}

方案二：纯CSS滚动驱动动画（无JS，简洁高效） #

利用CSS的滚动时间线特性，无需JS即可实现效果，适合现代浏览器环境：

组件代码 #

<div class="scroll-container" style="height: 100vh; overflow-y: auto;">
    <div class="top-banner">顶部横幅内容</div>
    <nav class="menu-bar">菜单栏内容</nav>
    
    <div class="content" style="height: 2000px;">滚动测试内容...</div>
</div>

CSS样式 #

.scroll-container {
    position: relative;
    /* 创建滚动时间线，绑定容器的滚动行为 */
    scroll-timeline: --container-scroll block;
}

.top-banner {
    height: 50px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    padding: 0 20px;
    /* 绑定动画到滚动时间线 */
    animation: hide-banner linear;
    animation-timeline: --container-scroll;
    /* 滚动0-50px时完成动画 */
    animation-range: 0 50px;
}

.menu-bar {
    height: 60px;
    background-color: #2c3e50;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 20px;
    position: sticky;
    top: 0;
    animation: stick-menu linear;
    animation-timeline: --container-scroll;
    animation-range: 0 50px;
}

.content {
    padding-top: 110px;
}

@keyframes hide-banner {
    to {
        height: 0;
        padding: 0;
        overflow: hidden;
    }
}

@keyframes stick-menu {
    to {
        top: -50px; /* 上移横幅高度，实现置顶效果 */
    }
}

注意：CSS滚动驱动动画目前支持Chrome、Edge、Firefox 119+等现代浏览器，若需兼容旧版浏览器，优先选择JS互操作方案。

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