Jump to content
Karbust

Bug com Sticky header

Recommended Posts

Karbust

Boas

Estou aqui a tentar terminar o site para a minha PAP e estou a ter algumas dificuldades em deixar a barra navegação fixa.

Um pequeno vídeo do meu erro:

https://www.youtube.com/watch?v=h5v9ITEsoOw

Basicamente é, a header fica fixa, mas tudo lhe passa por cima, em vez de passar atrás, alguém sabe o que se passa?

Código:

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
    background: url(../images/dott.png)repeat 0px 0px;
    background-size: 2px;
    -webkit-background-size: 2px;
    -moz-background-size: 2px;
    -o-background-size: 2px;
    -ms-background-size: 2px;
}
window.onscroll = function() {myFunction()};

var header = document.getElementById("header-top");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
			<div class="header-top" id="header-top">
				<div class="container">
					<div class="header-top-info">
						<nav class="navbar navbar-default">
							<!-- Brand and toggle get grouped for better mobile display -->
							<div class="navbar-header">
								<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
									<span class="sr-only">Toggle navigation</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
							</div>

							<!-- Collect the nav links, forms, and other content for toggling -->
							<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
								<nav>
									<ul class="nav navbar-nav">
										<li class="active"><a href="index.html">Início</a></li>
										<li><a href="#about" class="scroll">Sobre</a></li>
										<li><a href="#markets" class="scroll">Serviços</a></li>
										<li><a href="#gallery" class="scroll">Últimos Jogos</a></li>
										<li><a href="#mail" class="scroll">Contacto</a></li>
									</ul>
								</nav>
							</div>
							<!-- /.navbar-collapse -->
						</nav>
					</div>
				</div>
			</div>

Estou a tentar terminar isto o mais rápido possível porque tenho de ter os manuais feitos até 2ª feira...

Obrigado

Share this post


Link to post
Share on other sites
HappyHippyHippo

aumenta o z-index do header de forma a ser apresentado por cima do resto

  • Vote 1

IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
Karbust
1 minuto atrás, HappyHippyHippo disse:

aumenta o z-index do header de forma a ser apresentado por cima do resto

Obrigado!

Não havia maneira de funciona...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.