Detecting Scroll in Blazor and Reacting to Scroll Position

Question

I am using Blazor and need to detect when the user scrolls the page... (if possiable i rather do this without JS but I dont see anyway)

for refecence I am trying to create similar menu effect: https://www.brightside.com/homepage-therapy/

Main Issue document.body.addEventListener("scroll", function () doesnt get trigger

In JavaScript, this is very simple to do, but I'm having a hard time figuring out how to achieve this in Blazor. I've tried using JavaScript interop, but I'm not sure if I'm implementing it correctly. Can anyone help me with the right approach for detecting scroll events in Blazor and reacting to them, especially for a navbar class change based on scroll position?

Debugging: initializeScroll(dotNetHelper) function runs successfully, but the document.body.addEventListener("scroll", function () { part does not seem to trigger. I can see that the JavaScript function is being called, but the scroll event listener is not firing as expected.

my best guess: . I think issue is that Nav doesn't have scroll. I should be using scroll on body maybe?

MainLayout.razor

@inherits LayoutComponentBase
@inject NavigationManager NavigationManager

<div class="page">
    @using Microsoft.AspNetCore.Components
    
    <main>
        <TopNavMenu />

        <div>
            @Body
        </div>

        <Footer/>

    </main>
</div>

TopNavManu.razor

@implements IAsyncDisposable
@inject IJSRuntime JS

@rendermode InteractiveServer

<AuthorizeView>
    <NotAuthorized>
        <!-- Full Width Navbar using Bootstrap 5.3.2 -->
        <nav id="myNavBar" class="navbar_Top navbar fixed-top navbar-expand-lg w-100 @navbarClass">
            ...
        </nav>
    </NotAuthorized>
</AuthorizeView>



@code {
    private string navbarClass = ""; // Start with no class
    private IJSObjectReference? jsModule;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            jsModule = await JS.InvokeAsync<IJSObjectReference>("import",
                "/Components/Layout/TopNavMenu.razor.js");
            await jsModule.InvokeVoidAsync("initializeScroll");
        }
    }

    [JSInvokable]
    public void OnScrollChanged(bool isScrolledDown)
    {
        Console.WriteLine($"OnScrollChanged invoked: {isScrolledDown}");
        navbarClass = isScrolledDown ? "navbarbg" : "";
        StateHasChanged(); // Notify Blazor to update UI
    }

    public async ValueTask DisposeAsync()
    {
        if (jsModule is not null)
        {
            await jsModule.DisposeAsync();
        }
    }

TopNavMenu.razor.js

export function initializeScroll(dotNetHelper) {

    alert('initializeScroll');
    console.log("initializeScroll");

    document.body.addEventListener("scroll", function () {
        alert('addEventListener');
        console.log("addEventListener");
    });
}