如何在页面刷新时显示滚动的导航栏？

<nav class="navbar">
   <ul>
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2</a></li>
      <li><a href="#section3">Section 3</a></li>
   </ul>
</nav>

<section id="section1">
   <!-- 第一部分内容 -->
</section>

<section id="section2">
   <!-- 第二部分内容 -->
</section>

<section id="section3">
   <!-- 第三部分内容 -->
</section>

.navbar {
   position: fixed;
   top: 0;
   width: 100%;
   background-color: #000;
   color: #fff;
}

.navbar ul {
   list-style: none;
   display: flex;
   justify-content: space-around;
   padding: 0;
}

.navbar li {
   margin: 10px;
}

.navbar li a {
   text-decoration: none;
   color: #fff;
}

/* 当前选中导航项样式 */
.navbar li a.active {
   font-weight: bold;
}

window.addEventListener('scroll', function() {
   var navbar = document.querySelector('.navbar');
   var sections = document.querySelectorAll('section');

   var currentSectionIndex = 0;
   for (var i = 0; i < sections.length; i++) {
      if (sections[i].offsetTop <= window.scrollY) {
         currentSectionIndex = i;
      }
   }

   var activeLink = navbar.querySelector('.active');
   if (activeLink) {
      activeLink.classList.remove('active');
   }

   var newActiveLink = navbar.querySelector('a[href="#' + sections[currentSectionIndex].id + '"]');
   if (newActiveLink) {
      newActiveLink.classList.add('active');
   }
});