Bonjour une chose que tu pourais faire c'est de sauvegarder l'état de ta nav dans le localStorage, puis mettre tes propriété css dans des fonction et appeler ces fonction en fonction de la valeur de l'état de ta nav exemple
Tu mets tes styles dans des fonctions
function boxNavBar() {
document.getElementById("boxnavbar").style.padding = "0";
document.getElementById("boxnavbar").style.backgroundColor = "#101010";
document.getElementById("boxnavbar").style.boxShadow = "0 0 1px 3px rgba(0, 0, 0, 0.3)";
document.getElementById("boxnavbar").style.transition = ".2s";
document.getElementById("roundednav").style.boxShadow = "unset";
document.getElementById("roundednav").style.padding = "0";
document.getElementById("roundednav").style.transition = ".2s";
document.getElementById("logo").style.fontSize = "25px";
}
function roundedNav() {
document.getElementById("boxnavbar").style.backgroundColor = "transparent";
document.getElementById("boxnavbar").style.boxShadow = "unset";
document.getElementById("boxnavbar").style.transition = ".2s";
document.getElementById("roundednav").style.boxShadow = "0 0 1px 3px rgba(0, 0, 0, 0.3)";
document.getElementById("roundednav").style.padding = "10px";
document.getElementById("roundednav").style.transition = ".2s";
document.getElementById("logo").style.fontSize = "35px";
}
En suite tu fais ta condition
window.onscroll = function() {scrollFunction()};
function scrollFunction(){
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80){
localStorage.setItem("roundednav", "false");
boxNavBar();
}else{
localStorage.setItem("roundednav", "true");
roundedNav();
}
}
dans le code de haut , si le scroll dépasse 80px on stock l'état de la nav dans le localStorage avec pour nom roundednav et pour valeur false
dans le cas contraire, donc dans le else on modifie cette valeur en true.
en suit tu peut donc faire une condition au tout debut de ton code et verifier si roundednav==false ou roundednav==true appliquer le style qui correspond
let navSate = localStorage.getItem("roundednav");
if(navSate!=null){
if(navSate=='false'){
boxNavBar();
}else{
roundedNav();
}
}
du coup lorsque ta page va etre charger ou recharger c'est selon, on va dabord verifier si notre roundednav existe dans le localStorage, s'il n'existe pas ce code sera ignoré et passera à la suite mais s'il existe on verifie s'il vaut false ou true et on applique le css correspondant en executant soit boxNavBar() soit roundedNav()