So ändern Sie die Farbschiff -Hintergrundfarbe auf der Basis der Scrollposition in Blazor ⇐ C#

[Anonymous]

Ich habe eine klebrige Navigationsleiste oben auf meiner Website implementiert, und ich möchte ihre Hintergrundfarbe ändern, basierend darauf, ob die Seite gescrollt ist oder nicht. orange (unter Verwendung der CSS -Klasse navbarbg2). />
Navbar.razor

Code: Select all

@inject IJSRuntime JSRuntime

@rendermode InteractiveServer





`...`


`



.navbarbg {
background-color: red;
}

.navbarbg2 {
background-color: orange;
}


@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));
}
}
}


// 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);
});
});
};