Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

ThosuZ

Menu que muda o background quando rola o scroll

Recommended Posts

Olá, pessoal! Estou tentando criar um menu que, quando rola o scroll, ele muda (diminui o height e adiciona um background). Porém, aparentemente, nenhum código js tá funcionando... já tentei bastante coisa. Um dos tutoriais que usei: https://www.anicasagrande.com.br/menu-fixo-no-topo-que-muda-cor-com-rolagem/

 

Como fiz:

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript">
    (function () {
    var menu = document.getElementById('menuone'); // colocar em cache
    window.addEventListener('scroll', function () {
        if (window.scrollY > 50) menu.classList.add('menutwo'); // > 0 ou outro valor desejado
        else menu.classList.remove('menutwo');
    });
})();
    </script>
        <div class="menuone">
            <nav class="menufixo">
                <div class="menucenter">
                    <ul class="menu">
                        <li class="logomenu"><img class="iconmenu" src="images/logotipo-amarelo.png" width="105px" height="100%"/></li>
                        <li class="menulinks"><a class="botoesmenu" href="#">Home</a></li>
                        <li class="menulinks"><a class="botoesmenu" href="#">Serviços</a></li>
                        <li class="menulinks"><a class="botoesmenu" href="#">Portfólio</a></li>
                        <li class="menulinks"><a class="botoesmenu" href="#">Quem somos</a></li>
                        <li class="menulinks"><a class="botoesmenu" href="#">Contato</a></li>
                    </ul>
                </div>
            </nav>
        </div>
        <div class="menutwo">
            <nav class="menususpenso">
                <div class="menucentertwo">
                    <ul class="menut">
                        <li class="logomenut"><img class="iconmenut" src="images/Isotipo-amarelo.png" width="38px" height="100%"/></li>
                        <li class="menulinkst"><a class="botoesmenut" href="#">Home</a></li>
                        <li class="menulinkst"><a class="botoesmenut" href="#">Serviços</a></li>
                        <li class="menulinkst"><a class="botoesmenut" href="#">Portfólio</a></li>
                        <li class="menulinkst"><a class="botoesmenut" href="#">Quem somos</a></li>
                        <li class="menulinkst"><a class="botoesmenut" href="#">Contato</a></li>
                    </ul>
                </div>
            </nav>
        </div>
/*  Menu settings before scrolling  */

.menuone {
    display: block;
}

.menufixo {
    padding: 1px;
    margin: 10px -8px -8px -8px;
    position: fixed;
    top: 5;
    left: 2;
    width: 100%;
}

.menucenter {
    width: 1200px;
    margin: 0 auto;
}

.menu {
    text-transform: uppercase;
    list-style: none;
}

.logomenu {
    margin-right: 500px;
    display: inline-block;
}

.iconmenu {
    margin: -15px;
}

.botoesmenu {
    color: #f7c620;
    font-family: 'Bahnschrift Light', sans-serif;
    text-decoration: none;
    transition: color 1s;
    padding: 10px;
}

.botoesmenu:hover {
    color: #fff;
}

.menulinks {
    color: #fff;
    display: inline-block;
    margin: 8px;
}

/*  Menu settings after scrolling  */

.menutwo {
    display: block;
}

.menususpenso {
    padding: 1px;
    margin: 0px -8px;
    position: fixed;
    top: 5;
    left: 2;
    width: 100%;
    background: #8c05bd;
}

.menucentertwo {
    width: 1200px;
    margin: 0 auto;
}

.menut {
    text-transform: uppercase;
    list-style: none;
}

.logomenut {
    margin-right: 500px;
    display: inline-block;
}

.iconmenut {
    margin: -13px;
}

.botoesmenut {
    color: #f7c620;
    font-family: 'Bahnschrift Light', sans-serif;
    text-decoration: none;
    transition: color 1s;
    padding: 10px;
}

.botoesmenut:hover {
    color: #fff;
}

.menulinkst {
    color: #fff;
    display: inline-block;
    margin: 0 8px;
}

Perdão pelos códigos grandes.

Gostaria muito de uma orientação pra conseguir fazer, mas queria muito manter a atual estilização do menu.

Compartilhar este post


Link para o post
Compartilhar em outros sites

CÓDIGO:

<!DOCTYPE HTML>
<html>
	<head>
		<title> EXAMPLE </title>

		<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	</head>

	<body>
		<style type="text/css">
		.menu {
			display: block;
		}

		.menu .menufixo {
			padding: 1px;
			margin: 10px -8px -8px -8px;
			position: fixed;
			top: 5;
			left: 2;
			width: 100%;
			background: #000;
		}
		.menu.scroll .menufixo {
			padding: 1px;
			margin: 0px -8px;
			position: fixed;
			top: 5;
			left: 2;
			width: 100%;
			background: #8c05bd;
		}

		.menucenter {
			width: 1200px;
			margin: 0 auto;
		}

		.menuitens {
			text-transform: uppercase;
			list-style: none;
		}

		.menulogo {
			margin-right: 400px;
			display: inline-block;
		}

		.menuicon {
			margin: -15px;
		}

		.menulinks {
			color: #fff;
			display: inline-block;
			margin: 8px;
		}

		.botoesmenu {
			color: #f7c620;
			font-family: 'Bahnschrift Light', sans-serif;
			text-decoration: none;
			transition: color 1s;
			padding: 10px;
		}

		.botoesmenu:hover {
			color: #fff;
		}
		</style>

		<div class="menu">
			<nav class="menufixo">
				<div class="menucenter">
					<ul class="menuitens">
						<li class="menulogo"><img class="menuicon" src="images/logotipo-amarelo.png" width="105px" height="100%"/></li>
						<li class="menulinks"><a class="botoesmenu" href="#">Home</a></li>
						<li class="menulinks"><a class="botoesmenu" href="#">Serviços</a></li>
						<li class="menulinks"><a class="botoesmenu" href="#">Portfólio</a></li>
						<li class="menulinks"><a class="botoesmenu" href="#">Quem somos</a></li>
						<li class="menulinks"><a class="botoesmenu" href="#">Contato</a></li>
					</ul>
				</div>
			</nav>
		</div>

		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

		<script type="text/javascript">
		$(function () {
			var menu = document.getElementsByClassName('menu')[0];

			window.addEventListener('scroll', function () {
				if (window.scrollY > 50)
				{
					menu.classList.add('scroll');
				}
				else
				{
					menu.classList.remove('scroll');
				}
			});
		});
		</script>
	</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

ThosuZ,

Simplificando seu problema:

 

<script>
  $(window).on("scroll", function() {
    if ($(window).scrollTop() > 50) {
      $(".menu").addClass("scrolled");
    } else {
      $(".menu").removeClass("scrolled");
    }
  });
</script>

Pronto!

A partir daí, é só definir as regras CSS.

 

No código acima, quando o scroll tiver acima de 50 pixels (51 em diante) ele vai adicionar ao menu a classe "scrolled". Quando for igual ou menos que 50, ele remove a classe "scrolled".

 

Um abraço!

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Rafael_Ferreira
      Não consigo carregar a imagem do captcha do meu formulário. Foi testado com o xampp e easyphp. Também não carregou a imagem de outros captcha. 
       
       
    • Por luiz monteiro
      Olá.
      Estou atualizando meu conhecimento com Front-End e me deparei com o seguinte problema.
      Criei um sistema para fazer o upload de imagens e alguns campos text.
      Algo bem simples para depois começar a estudar javascript para mostrar a miniatura....
      Mas quando saio do navegador Chrome ou da aba por mais de 3 minutos, ao retornar o navegador as vezes atualiza ou nem chega atualizar mas limpa os campos.
      Estou usando um Smart Motorola com Android, mas um amigo testou no iPhone e acontece a mesma coisa.
      Gostaria de saber se há como usar javascript para evitar isso?
      Agradeço desde já.

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Uploader</title>
      </head>
      <body>
          <form action="?" method="post" enctype="multipart/form-data">
              <br><br>
              <div>selecione a imagem 1</div>
              <input type="file" name="foto1" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem1">
              
              <br><br>
              <input type="file" name="foto2" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem2">
              
              <br><br>

              <input type="file" name="foto3" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem3">
              
              <br><br>
              <input type="submit" value="Enviar">
              <br><br>
          </form>
      <?php
      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
          vardump ($_FILES);
      }
      ?>
      </body>
      </html>
       
       
       
    • Por belann
      Olá!
       
      Estou usando o nextjs versão 15.2.3 e criei uma navbar que quando é carregado o programa aparece com a home, mas na hora de clicar na página produtos desaparece a navbar.
      A navbar esta sendo chamada no layout.tsx estou usando typescript
      e fica dessa forma
      <div>           <Navbar/>             <main>{children}</main>             </div>  
    • Por ILR master
      Fala pessoal, tudo bem?
       
      Eu tenho o seguinte código:
       
      <script>
         $(function(){
      var jElement = $('.fixar_banner');
      $(window).scroll(function(){
          if ( $(this).scrollTop() > 120 ){
              jElement.css({
                  'position':'fixed',
                  'top':'10px'
              });
          }else{
              jElement.css({
                  'position':'relative',
                  'top':'auto'
              });
          }
      });
      });
      </script>
       
      Porém, eu quero que a div fique fixa até que outro elemento apareça na tela, tipo o rodapé da página por exemplo. É mais ou menos como a página de notícia do uol.
      https://noticias.uol.com.br/internacional/ultimas-noticias/2025/01/19/sonho-americano-brasileiros-moram-em-carro-e-buscam-comida-no-lixo-nos-eua.htm
       
      Espero ter sido claro.
       
      Obrigado :)
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.