Ir para conteúdo

Arquivado

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

sick

Topo por cima da div

Recommended Posts

Boa noite amigos desenvolvedores

Estou passando por um dificuldade, ate então besta, mas é uma dificuldade kkk

 

eu tenho um topo que é fixo, dentro desse topo, tem um link que quando é clicado, ele rola ate uma div especifica la no final da pagina, ai surge o problema, quando clico ao chegar até a div, por ser um topo fixo, fica por cima da div, ou seja, ele vai ate a div, mas o topo por ser fixo tampa. o topo tem exatamente 70px, como que eu faço, para ir até a div so que 70px antes, seila algo assim?

conseguiram entender?

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

No css da div que está atrás do topo, coloca z-index: 99 e vê se funciona. O z-index força um elemento a ficar acima do outro.

Compartilhar este post


Link para o post
Compartilhar em outros sites
2 horas atrás, luiz14 disse:

No css da div que está atrás do topo, coloca z-index: 99 e vê se funciona. O z-index força um elemento a ficar acima do outro.

eu tinha tentado isso tbm, mas ele sobe em cima do topo e mistura tudo, ta dificil :/

Compartilhar este post


Link para o post
Compartilhar em outros sites

"Solução" que encontrei para contornar isso, mas que coisinha chata isso heim

Se alguem tiver alguma solução menos gambiarra,  postem ae

#nomedadivdestino:before { 
  display: block; 
  content: ""; 
  margin-top: -70px; 
  height: 70px; 
  visibility: hidden; 
}

SOLUÇÃO MELHOR A BAIXO

Compartilhar este post


Link para o post
Compartilhar em outros sites

Como que você está fazendo para deslocar até a div?

Talvez assim funcione, precisaria testar

$('#divParaExibir')[0].scrollIntoView(true);//posiciona a div no topo
window.scrollTo(($(window).scrollTop()+70), 0);//Desloca o scroll +70 para tirar de tras do menu fixo

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
1 hora atrás, Pita disse:

Como que você está fazendo para deslocar até a div?

Talvez assim funcione, precisaria testar


$('#divParaExibir')[0].scrollIntoView(true);//posiciona a div no topo
window.scrollTo(($(window).scrollTop()+70), 0);//Desloca o scroll +70 para tirar de tras do menu fixo

 

 

eu definia diretamente no href="#nomedadiv"; e em baixo uma div com o id

 

mas no final, a correção saiu assim

 

$('.calculotopo').click(function(){
    var headerHeight = 70;

    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top - headerHeight
    }, 500);
    return false;
});  

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Vitor Correa
      Olá, estou criando uma página em html e estou tendo dificuldade em achar uma solução para esse problema, como faço para que o menu fique fixo em todas as páginas desse site sem que seja necessário refazer todo o código? Segue abaixo o código do meu menu e do css:
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="./../css/header.css"> <title></title> </head> <body> <header> <img src="./../img/fundo.png"> <nav> <ul> <li><a href="sla.html" class="active">Início</a></li> <li><a href="pps.html">Teste</a></li> <li><a href="#">Teste</a></li> <li><a href="#">Teste</a></li> <li><a href="#">Teste</a></li> </ul> </nav> </header> </body> </html> img { width: 100px; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; font-weight: bold; } li { float: left; border-right: 0px solid #333; } li: last-child { border-right: none; } li a { display: block; padding: 10px 15px; color: white; text-align: center; text-decoration: none; } li a:hover:not(.active){ background-color: #111; } .active { background-color: #FF0000; float: right; color: #111; }  
    • Por Lucas Shimura
      Olá, estou trabalhando em um site que o HTML do Menu não é alterável. Eu quero que quando o usuário rolar o scroll do mouse até a barra de menu, ela se torne fixa no topo da página. Respeitando a distância de outra barra que está funcionando e já se fixa automaticamente.
       
      HTML do MENU (Não alterável): 
      <nav class="menu_component" id="component_37548"> <div class="menu-head"> <span> Menu </span> <button class="hamburger hamburger--spin-r" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"> </span> </span> </button> </div> <div class="menu-panel"> <menu class="expanded hamburger-menu"> <li id="menu_item_39037" class="sub"> <a alt="O SIENPRO" title="" target="" class="empty-href"> O SIENPRO </a> <menu class="submenu"> <li id="menu_item_41614" class=""> <a alt="SOBRE" title="" target="" class="" href="/p/21374-sobre-o-sienpro"> SOBRE </a> </li> <li id="menu_item_39038" class=""> <a alt="COMIT&Ecirc;" title="" target="" class="" href="/p/23834-comite-2018"> COMIT&Ecirc; </a> </li> </menu> </li> <li id="menu_item_41615" class=""> <a alt="TEMA" title="" target="" class="" href="https://sienpro.catalao.ufg.br/#tema"> TEMA </a> </li> <li id="menu_item_41616" class=""> <a alt="PRINCIPAIS DATAS" title="" target="" class="" href="https://sienpro.catalao.ufg.br/#datas"> PRINCIPAIS DATAS </a> </li> <li id="menu_item_39040" class="sub"> <a alt="EDI&Ccedil;&Otilde;ES SIENPRO" title="" target="" class="empty-href"> EDI&Ccedil;&Otilde;ES SIENPRO </a> <menu class="submenu"> <li id="menu_item_41593" class=""> <a alt="I SIENPRO - 2017" title="" target="" class="" href="/p/23811-i-sienpro-2017"> I SIENPRO - 2017 </a> </li> <li id="menu_item_41605" class=""> <a alt="II SIENPRO - 2018" title="" target="" class="" href="/p/23814-ii-sienpro-2018"> II SIENPRO - 2018 </a> </li> </menu> </li> <li id="menu_item_39041" class=""> <a alt="CONTATO" title="" target="" class="" href="https://sienpro.catalao.ufg.br/#contato"> CONTATO </a> </li> <li id="menu_item_41617" class="sub"> <a alt="ARTIGOS" title="" target="" class="empty-href"> ARTIGOS </a> <menu class="submenu"> <li id="menu_item_41618" class=""> <a alt="REGRAS PARA SUBMISS&Atilde;O" title="" target="" class="empty-href"> REGRAS PARA SUBMISS&Atilde;O </a> </li> <li id="menu_item_41619" class=""> <a alt="ORIENTA&Ccedil;&Atilde;O PARA APRESENTA&Ccedil;&Atilde;O" title="" target="" class="empty-href"> ORIENTA&Ccedil;&Atilde;O PARA APRESENTA&Ccedil;&Atilde;O </a> </li> </menu> </li> <li id="menu_item_41620" class=""> <a alt="PROGRAMA&Ccedil;&Atilde;O" title="" target="" class="empty-href"> PROGRAMA&Ccedil;&Atilde;O </a> </li> <li id="menu_item_41621" class=""> <a alt="LOCAL" title="" target="" class="empty-href"> LOCAL </a> </li> </menu> </div> </nav>  
      CSS da variável de fixação:
      .fixar{ position: fixed; width: 100%; top: 37px; z-index: 999; }  
      Javascript para tentar fixar o menu:
      <script type="text/javascript"> jQuery("document").ready(function($){ var offset = $('.menu_component').offset().top; var nav = $('.menu_component'); $(document).on('scroll', function () { if (offset <= $(window).scrollTop()) { nav.addClass('fixar'); } else { nav.removeClass('fixar'); } }); }); </script>  
       
      Pensei que estava certo o Javascript, mas não está funcionando de maneira alguma. Link para acessar o site: https://sienpro.catalao.ufg.br/
      Não sei se é classe que estou tentando alterar que está errada, se é classe da <nav>, da <div>, ou do <menu> que eu tenho que alterar com o javascript. Ou se tem que ser uma cascata entre todas elas.

      Desde já, agradeço.
       
    • Por cesarhtc
      Bom dia tenho esse código abaixo, como posso fixar o tamanho com 10 posições quando o campo tiver em branco.
       

       
      <span id="formata-valor">             </span>
       
       
      #formata-valor
                     {
                        font-size: 11pt;
                        font-family: FonteLogo, "Open Sans" ,Arial;    
                        color:#000000;
                        margin-top:-15px;
                        margin-left: 4px;
                        margin-bottom: 15px;        
                        width:15%;          
                        font-weight: normal;             
                        padding:5px;
                        border:1px solid #cccccc;
                       /* background-color:#f5f5f5;
                        border-top-left-radius: 0em;
                        border-top-right-radius: 0em;
                        border-bottom-right-radius: 0em;
                        border-bottom-left-radius: 0em;                     
                        background-image:-ms-linear-gradient(top, #ffffff, #e6e6e6);
                        background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
                        background-image:-webkit-linear-gradient(top, #ffffff, #e6e6e6);
                        background-image:-o-linear-gradient(top, #ffffff, #e6e6e6);
                        background-image:linear-gradient(top, #ffffff, #e6e6e6);
                        background-image:-moz-linear-gradient(top, #ffffff, #e6e6e6);
                        background-repeat:repeat-x;*/    
                        -webkit-border-radius:6px;
                        -moz-border-radius:6px;
                        border-radius:6px;
                      
                       }
    • Por zetabyte00
      Porque mesmo com a marcação e estilos abaixo e não consigo colocar o elemento <p> no topo da página??? Somente definindo no arquivo de estilo, "top: -17px;" é que consigo. Poderiam me explicar?
       
      <!DOCTYPE html> <html> <head> <title>Página Exemplo</title> <link rel="stylesheet" type="text/css" href="styles/style.css" media="screen"> <meta charset="UTF-8"> </head> <body> <div id="teste"> <p>teste</p> </div> </body> </html> body { position: relative; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; top: 0px; left: 0px; height: 100%; width: 100%; background-color: orange; } #teste { background-color: green; }  
    • Por Gabriel Orlando
      Bom dia pessoal,
      Site: http://www.connectwebmarketing.com.br/theotherside/
      Estou com um problema em deixar o topo do meu site responsivo, gostaria de deixar um campo de busca (que se encontra no topo do site) no canto direito, e arrumar o "quebramento do topo do site quando vou diminuindo a resolução... alguém tem alguma solução?"
×

Informação importante

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