0

Pessoal uma dúvida meio besta,

Estou fazendo uma landing page e queria usar uma navbar estilo a desse site aqui:

http://themes.uconnect.pk/cosmic/standard-slideshow-inverse-nav-darken.html

Quando ele ta no topo da página ele fica completamente transparente e assim que a página desce um pouco ele já ganha uma cor porém sem perder a transparencia...

1

2 Respostas 2

1

Fiz um exemplo bem primitivo usando um pouco de Js, para servir de base. Acredito que irá resolver seu problema quando for aplicado os estilos. Optei em usar js puro para você ter uma maior compreensão do que está acontecendo, mas você poderia usar o JQuery também ou recursos do bootstrap! Se quiser saber mais sobre o assunto pesquise sobre, Affix, segue alguns links:

Affix com Bootstrap 3: https://getbootstrap.com/docs/3.3/javascript/#affix

W3Schools sobre affix: https://www.w3schools.com/bootstrap/bootstrap_ref_js_affix.asp

window.onscroll = scroll;

function scroll() {
  var scrollTop = window.pageYOffset;
  if (scrollTop > 30) {
    try {
      document.getElementById('antes').id = 'depois'
    } catch (e) { 
      false 
    }
  } else {
    try {
      document.getElementById('depois').id = 'antes'
    } catch (e) { 
      false
    }
  }
}
body {
  height: 1000px
}

main {
  position: relative;
  top: 60px
}

#antes {
  height: 50px;
  width: 100%;
  z-index: 10;
  position: fixed;
  transition: all 0.5s ease-in-out;
  background-color: blue;
}

#depois {
  height: 50px;
  width: 100%;
  z-index: 10;
  position: fixed;
  transition: all 0.5s ease-in-out;
  background-color: green;
  opacity: 0.9;
}
<div id='antes'>
  Hello world!
</div>

<main>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a fermentum nisl. Sed id elementum est. Vivamus pharetra scelerisque mauris ut lobortis. Suspendisse gravida luctus orci volutpat tincidunt. Donec a erat luctus, rhoncus orci condimentum,
  aliquet nunc. Nulla varius nisi a pretium pretium. Phasellus et mattis mi. Suspendisse efficitur elit eget libero laoreet ornare. Sed eget tristique erat. Vestibulum nec nulla in massa cursus feugiat. Mauris aliquam dolor in auctor fringilla. Maecenas
  efficitur quam vel pellentesque faucibus.
</main>

3
  • Embora este link possa responder à pergunta, é melhor incluir as partes essenciais da resposta aqui e fornecer o link para referência. As respostas apenas por link podem ser invalidadas se a página com o link for alterada. - Da Revisão
    – NoobSaibot
    Commented 17/06/2018 às 12:27
  • @NoobSaibot Valeu pela dica! Coloquei o código aqui mesmo e fiz algumas alterações. Commented 17/06/2018 às 13:56
  • 1
    Cara valeu funcionou !!!!
    – user68537
    Commented 20/06/2018 às 12:28
0

Usando jQuery, crie um evento de scroll e, na função, você pode obter a distância entre onde você está na página e topo com $(window).scrollTop(), verifique se esse valor é zero, se for, coloca um fundo transparente se não a cor que tu quiser.

$(window).scroll(function() {
  if($(window).scrollTop() === 0) {
    $("nav").css("background-color", "rgba(0, 0, 0, 0)");
  } else {
    $("nav").css("background-color", "rgba(255, 0, 0, 0.3)");
  }
});
nav {
  width: 100%;
  height: 100px;
  position: fixed;
}

body {
  height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav></nav>

Você deve fazer log-in para responder a esta pergunta.