La navbar ne veut pas resté a sa place après une actualisation

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()

Hello :)

Alors pour l'actualisation tu peux simplement ajouter un event onload:

     window.onscroll = function() {scrollFunction()};
    document.addEventListener('DOMContentLoaded', (event) => {
        scrollFunction()
    })

      // La suite de ton JS...

Comme ça ta function se lance quand le contenu html est chargé, ett tu gardes aussi l'event scroll ^^

Sinon petit avis perso: ce serait plus propre de mettre tout ton style dans des class, et ensuite appliquer la class en JS :p

//CSS
#boxnavbar {
    /* le style initial qui est dans le else */
}

#boxnavbar.scrolled_nav {
    /* le style qui est dans le if */
}

#roundednavbar {
    /* le style initial qui est dans le else */
}

#roundednavbar.scrolled_nav {
    /* le style qui est dans le if */
}

// JS
 function scrollFunction() {
        if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
          document.getElementById("boxnavbar").classList.add('scrolled_nav')
          document.getElementById("roundednav").classList.add('scrolled_nav')
          document.getElementById("logo").style.fontSize = "25px";
        } else {
          document.getElementById("boxnavbar").classList.remove('scrolled_nav')
          document.getElementById("roundednav").classList.remove('scrolled_nav')
          document.getElementById("logo").style.fontSize = "35px";
        }
  }