How to make a css style change via Jquery

Question

Hello guys I have a navigation menu on my page that is at first transparent. How do I go through Jquery as soon as I scroll down (scroll) apply a background color to the navigation menu .

This is the html code snippet

        <div id="nav" class="navegacao">
        <div class="banner">
            <h1>Site</h1>
            <small>Desenvolvedor de Sites</small>
         </div>
        <nav>
            <ul>
                <li>
                  <a href="/">Home</a>  
                </li>
                <li>
                   <a href="">Sobre</a> 
                </li>
                <li>
                   <a href="">Serviços</a> 
                </li>
                <li>
                   <a href="">Contatos</a> 
                </li>
            </ul> 
        </nav> 
       
    </div>

Answer 1

HTML

<div id="nav" style="height: 150vh; margin-top: 100px;">
  <!-- Altura e margem apenas para vizualizar a mudança de cor -->
  <nav>Abc</nav>
</div>

jQuery

$(document).ready(function(){       
  var scroll_pos = 0;
  $(document).scroll(function() { 
    scroll_pos = $(this).scrollTop(); //"scrollTop" obtem a posição vertical atual da barra de rolagem
    if(scroll_pos > 10) { // No lugar de "10", é quantos pixels você quer que o usuário desça para fazer a mudança de cor.
        $("nav").css('background-color', 'blue');
    }
  });
});

Note: Pay attention to the comments.