Javascript Ao rolar o mouse, a classe navbar não ativa

[brunovianarenega]

Quando rola-se o mouse, ativaria a class navbar, o problema é que não está acontecendo.

 

#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);
}


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

 

js

 

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("navbar")
  } else {
    navbar.classList.remove("navbar");
  }
}

 

[MailingTester]

Envie o trecho html pro seu exemplo ser testável
E pra eu poder testar aqui e investigar o que acontece ou o q não acontece

 

[brunovianarenega]

10 horas atrás, MailingTester disse:

Envie o trecho html pro seu exemplo ser testável
E pra eu poder testar aqui e investigar o que acontece ou o q não acontece

 

 

<div id="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>

 

[joaovitorm10]

Em 06/02/2022 às 07:46, brunovianarenega disse:

 

<div id="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>

 

classlist ao invés de elementbyid, este e o erro não existe classe sim id

[brunovianarenega]

Em 07/02/2022 às 13:22, joaovitorm10 disse:

classlist ao invés de elementbyid, este e o erro não existe classe sim id

 

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

 

 

 

js

 

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("navbar")
  } else {
    navbar.classList.remove("navbar");
  }
}

 

css

 

#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);
}

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

 

Mudei algumas coisas, mas ainda não funcionou, consegue ajudar?