Ir para conteúdo

Arquivado

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

Apenas Eu

Menu topo fixo

Por , em Desenvolvimento frontend

Recommended Posts

Apenas Eu    13

Apenas Eu
Postado

Olá!

Rapaiz, eu estou com uma dúvida que deveria ser tão facil...mas na realidade eu não consegui.

 

Eu quero fazer um menu com com topo fixo, mas ele está sobrepondo o resto da página antes de sequer descer a rolagem da pagina.

Eu fiz um cód. bem simples:

nav {
      position:fixed;
      top:0;
height: 5.0em;
width: 100%;
}

Bom eu só postei isso por enquanto porque o cód inteiro é muito grande. Se for necessário eu posto o resto....

 

O que mais precisa incluir? Será que precisa de algum script?

Valeuu

Compartilhar este post

Link para o post
Compartilhar em outros sites

Apenas Eu    13

Apenas Eu
Postado

Olá! É isso mesmo obrigado!

 

Mas ainda não consegui fazer isso funcionar no meu projeto. Eu acho que o script não está fazendo a substituição...

 

Eu fiz assim:

 

@media screen and (min-width: 1024px) { /*MONITORES DE NOTBOOK*/
  nav {
top:0;
height: 5.0em;
width: 100%;
}
    .nav-total {
     position: relative;   
    }
    .f-nav  { 
    z-index: 9999; 
position: fixed;  
top: 0; width:100%;
      
    }
nav ul{
display:inline;
height: auto; 
margin-left:50px;
}
nav img {
float: left;
width: 11%;
padding: 10px 20px 0 0;
margin-left: 3.3em;
}
nav li   {
float: left;
display: block;
height: 50px; 
width: 95px;
}
nav a{
display: block;
padding: 30px 0 30px 0;
text-decoration: none; 
text-align: center; 
}
nav a:hover {
text-decoration: none;
}
nav a#pull {
display: none;
}
nav a#pull:after {
display: none;
}
 }

*/html/*
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery("document").ready(function($){
    
    var nav = $('.nav-total');
    
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            nav.addClass(".f-nav");
        } else {
            nav.removeClass(".f-nav");
        }
    });

});
</script>
<body>
<nav class="clearfix nav-total">
<ul >
<li><a href="http://www.dcsdesenvolvimento.com.br/index.php"  >Início</a></li>
<li><a href="http://www.dcsdesenvolvimento.com.br/sobre-a-historia.php" >Sobre a</a></li>
</nav>

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

Seu code está com erro.

 

TROQUE:

if ($(this).scrollTop() > 100) {

POR:

if ($(this).scrollTop() > 100) {

vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Apenas Eu    13

Apenas Eu
Postado

Olá!

Mas que estranho troquei a linha que você falou e nada.

Removi todo o restante dos css e JS para ver se era algum conflito, mas não houve resposta. Continua não lendo a substituição dos atributos.

 

--

 

Achei o problema! Estava aqui

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Ele tava nas ultimas linhas, por isso nada funcionava...

 

Muito obrigado em

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

Opa, que bom que resolveu.

 

vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito