重新加载页面时，滚动上的彩色导航栏不会切换为彩色

问题描述

此代码根据页面的滚动程度在透明导航栏和白色导航栏之间切换。但是，如果在页面滚动到导航栏应为白色的位置时重新加载页面，则页面在重新加载后将再次变为透明，直到我开始滚动（然后变为白色）。如果重新加载页面，如何在滚动之前将其设置为白色？

$(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
        $("nav").addClass("scrolled");
    } else {
        $("nav").removeClass("scrolled");
    };
});

解决方法

    $(document).ready(function(){


      if ($(window).scrollTop() > 50){
        $("nav").addClass("scrolled");
      }else{
        $("nav").removeClass("scrolled");
      };
    
  
});

尝试一下并提供反馈

,

根据评论进行编辑，以检查加载时的滚动并适当设置样式。

function toggleScroll(){  
  if ($(window).scrollTop() > 50) {
    $("nav").addClass("scrolled");
  } else {
    $("nav").removeClass("scrolled");
  };
}

$(window).scroll(function() {
    toggleScroll();
    $( "nav" ).text( $(this).scrollTop() );
});

$(function() {
    toggleScroll();
    $( "nav" ).text( "Loaded with scroll: " + $(this).scrollTop() );
});

.container {
  height: 2000px;
  background-color: gray;
}

nav {
  position: fixed;
  top: 20px;
  left: 20px;
  height: 150px;
  width: 150px;
  padding: 40px;
  background-color: transparent;
}

.scrolled {
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <nav id="nav">
      Nav
    </nav>
</div>