How to Change Navbar Background Color Based on Scroll Position in Blazor

I have implemented a sticky navigation bar at the top of my website, and I want to change its background color based on whether the page is scrolled or not.

When the user is at the top of the page, I want the navigation bar's background to be red (using the css class navbarbg).

Once the user scrolls down the page, I want the navbar's background to become orange (using the css class navbarbg2).

issue:indow.addEventListener('scroll', () => {& public void OnScroll(int scrollPosition) are not getting run

NavBar.razor

@inject IJSRuntime JSRuntime@rendermode InteractiveServer<AuthorizeView><NotAuthorized><!-- Full Width Navbar using Bootstrap 5.3.2 --><nav class="navbar_Top navbar fixed-top @divClass">       `...`     </nav></NotAuthorized>`<AuthorizeView><style>     .navbarbg {         background-color: red;     }         .navbarbg2 {             background-color: orange;         }</style>@code {    private string divClass = "navbarbg"; // Default class for when at the top of the page    // This method will be called by JavaScript to update the navbar background class    [JSInvokable]    public void OnScroll(int scrollPosition)    {        Console.WriteLine($"OnScroll called with scroll position: {scrollPosition}");  // Log scroll position                                                                                       // Apply "navbarbg2" when scrolled down, "navbarbg" when at the top        divClass = scrollPosition > 0 ? "navbarbg2" : "navbarbg";        Console.WriteLine($"Class updated to: {divClass}");  // Log class update        StateHasChanged();  // Re-render the component after updating the class    }    // Set up JavaScript interop to listen for the scroll event when the component is rendered    protected override async Task OnAfterRenderAsync(bool firstRender)    {        if (firstRender)        {            System.Console.WriteLine("First render, adding scroll listener...");  // Log for the first render                                                                           // Start listening for the window's scroll event via JavaScript interop            await JSRuntime.InvokeVoidAsync("addScrollListener", DotNetObjectReference.Create(this));        }    }}<script>    // This function will be called to start listening for scroll events    window.addScrollListener = (dotNetHelper) => {        console.log("Scroll event listener added");        window.addEventListener('scroll', () => {            console.log("inside addeventlist");            // Get the scroll position of the window            var scrollPosition = window.scrollY;            console.log("Scroll position: " + scrollPosition);  // Log the scroll position            // Call the Blazor C# method with the current scroll position            dotNetHelper.invokeMethodAsync('OnScroll', scrollPosition)                .then(() => {                    console.log("OnScroll method invoked successfully");                })                .catch(error => {                    console.error("Error invoking OnScroll:", error);                });        });    };</script>