Tengo una navegación que cambia el color de fondo, etc. cuando me desplazo más allá de 10px. Pero si me quedo más de 10px y actualizo la página, vuelve a tener un fondo transparente, hasta que empiezo a desplazarme por la página.

¿Cómo hago que la función funcione cuando actualizo la página más allá de 10px?

Código:

 window.onload = scrollNavi; function scrollNavi() { $(window).scroll(function () { var scroll = $(window).scrollTop(); if (scroll > 10) { $(".navbar").css({ "background-color": "white", "box-shadow": "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px" }); $(".nav-item").css("color", "#707070"); $(".logo").attr("src", "/images/logo/ccc-logo-new.png"); $(".navi-icon").css("color", "#707070"); } else { $(".navbar").css({ "background": "none", "box-shadow": "none" }); $(".nav-item").css("color", "white"); $(".logo").attr("src", "/images/logo/ccc-logo-hvid.png"); $(".navi-icon").css("color", "white"); } }); };

Como ve arriba, he intentado activarlo con una ventana. onload pero eso no parece ayudar.

Navegación:

 <nav class="navbar fixed-top navbar-expand-xl navbar-light"> <div class="container-fluid"> <a class="navbar-brand" href="/"> <img class="logo" src="/images/logo/ccc-logo-hvid.png" alt="" height="65"> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs- target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria- expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </div> </nav>