ativa css e desativa ao rolar scroll

Ajuda com script para que, quando o usuário rolar a página, o menu fica fixed, e quando ele voltar ao topo, fica static.

<div id="navbar" class="navbar">
 <a href="index.php">
 <img src="https://i.ibb.co/Z2TKYRX/artx-logo-text.png" alt="Art X" class="artx-logo">
 </a>
 <nav id="nav">
 <button aria-label="Abrir Menu" id="btn-mobile" aria-haspopup="true" aria-controls="menu" aria-expanded="false">
 <span id="hamburger"></span>
 </button>
 <ul id="menu" role="menu">
 <li><a href="index.php">Inicio</a></li>
 <li><a href="">Portfólio</a></li>
 <li><a href="">Clientes</a></li>
 <li><a href="">Institucional</a></li>
 <li><a href="">Contato</a></li>
 </ul>
 </nav>
 <div class="btn-finance">
 <button><a href="orc.php">Solicite um orçamento</a></button>
 </div>
</div>

	 

#navbar {
 box-sizing: border-box;
 width: 100%;
 position: static;
 top: 0;
 height: 50px;
 padding: 1rem;
 display: flex;
 align-items: center;
 justify-content: space-around;
 background: rgba(255, 255, 255, 0.35);
 -webkit-backdrop-filter: blur(20px);
 backdrop-filter: blur(20px);
}

.artx-logo {
 margin-top: 5px;
}

.navbar {
 width: 100%;
 position: fixed;
 top: 0;
 background: rgba(255, 255, 255, 0.35);
 -webkit-backdrop-filter: blur(20px);
 backdrop-filter: blur(20px);
}

#menu {
 display: flex;
 list-style: none;
 gap: 0.5rem;
}

#menu a {

 display: block;
 padding: 2rem;
 color: #131313;
 font-size: 14px;

}

#menu a:hover {

 background: -webkit-linear-gradient(-70deg, #be79b2 30%, #884593 50%, #3f2c52 100%);
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 -webkit-box-decoration-break: clone;

}

#btn-mobile {
 display: none;
}

@media (max-width: 900px) {

.btn-finance {display: none;}

}

@media (max-width: 768px) {

.btn-finance {display: none;}

 .artx-btn {
 display: none;
 }
 #menu {
 display: block;
 position: absolute;
 width: 100%;
 top: 50px;
 right: 0px;
 background-color: white;
 transition: 0.6s;
 z-index: 1000;
 height: 0px;
 visibility: hidden;
 overflow-y: hidden;
 }
 #nav.active #menu {
 height: calc(100vh - 50px);
 visibility: visible;
 overflow-y: auto;
 }
 #menu a {
 padding: 1rem 0;
 margin: 0 1rem;
 border-bottom: 2px solid rgba(0, 0, 0, 0.05);
 }
 #btn-mobile {
 display: flex;
 padding: 0.5rem 1rem;
 font-size: 1rem;
 border: none;
 background: none;
 cursor: pointer;
 gap: 0.5rem;
 }
 #hamburger {
 border-top: 2px solid;
 width: 20px;
 }
 #hamburger::after,
 #hamburger::before {
 content: '';
 display: block;
 width: 20px;
 height: 2px;
 background: #131313;
 margin-top: 5px;
 transition: 0.3s;
 position: relative;
 }
 #nav.active #hamburger {
 border-top-color: transparent;
 }
 #nav.active #hamburger::before {
 transform: rotate(135deg);
 }
 #nav.active #hamburger::after {
 transform: rotate(-135deg);
 top: -7px;
 }
}

.btn-finance button {

 background: linear-gradient(to bottom, #884593 5%, #884593 100%);
 background-color: #ffffff;
 border: none;
 display: inline-block;
 cursor: pointer;
 color: #ffffff;
 font-size: 14px;
 padding: 5px 10px;
 text-decoration: none;
 -webkit-transition: 0.5s ease;
 transition: 0.5s ease;

}

.btn-finance button a {

 color: white;
}

.btn-finance button:hover {

 border: none;
 background: linear-gradient(to bottom, #131313 5%, #131313 100%);
 background-color: #131313;
 display: inline-block;
 cursor: pointer;
 color: white;
 font-size: 14px;
 text-decoration: none;
 -webkit-transition: 0.5s ease;
 transition: 0.5s ease;
}

#content {
 height: 2000px;
}

#navbar {
 box-sizing: border-box;
 width: 100%;
 /*position: static;*/
 position: sticky;
 top: 0;
 height: 50px;
 padding: 1rem;
 display: flex;
 align-items: center;
 justify-content: space-around;
 background: rgba(255, 255, 255, 0.35);
 -webkit-backdrop-filter: blur(20px);
 backdrop-filter: blur(20px);
}

.navbar {
 width: 100%;
 /*position: fixed;*/
 top: 0;
 background: rgba(255, 255, 255, 0.35);
 -webkit-backdrop-filter: blur(20px);
 backdrop-filter: blur(20px);
}

	 

	Exemplo:

	JsBin:[https://jsbin.com/qevavudeca/edit?html,css,output](https://jsbin.com/qevavudeca/edit?html,css,output) 

	 

	Outras formas sem utilizar sticky:

	[https://stackoverflow.com/questions/63458661/how-to-make-a-sticky-navbar-without-js](https://stackoverflow.com/questions/63458661/how-to-make-a-sticky-navbar-without-js)

#content {
 height: 2000px;
}

#navbar {
 box-sizing: border-box;
 width: 100%;
 /*position: static;*/
 position: sticky;
 top: 0;
 height: 50px;
 padding: 1rem;
 display: flex;
 align-items: center;
 justify-content: space-around;
 background: rgba(255, 255, 255, 0.35);
 -webkit-backdrop-filter: blur(20px);
 backdrop-filter: blur(20px);
}

.navbar {
 width: 100%;
 /*position: fixed;*/
 top: 0;
 background: rgba(255, 255, 255, 0.35);
 -webkit-backdrop-filter: blur(20px);
 backdrop-filter: blur(20px);
}

  

 Exemplo:

 JsBin:[https://jsbin.com/qevavudeca/edit?html,css,output](https://jsbin.com/qevavudeca/edit?html,css,output) 

  

 Outras formas sem utilizar sticky:

 [https://stackoverflow.com/questions/63458661/how-to-make-a-sticky-navbar-without-js](https://stackoverflow.com/questions/63458661/how-to-make-a-sticky-navbar-without-js)

	 

	É isso mesmo, só que quando chega na metade da página, o menu some, como resolver?