2

Estou trabalhando em um site que possui uma navbar e um menu (a altura dos dois somadas dá 101px), que ao rolar até eles, eles fixam no topo da tela e ficam flutuantes.

Estou querendo que as âncoras que defini na página não sejam sobrepostas pelo menu quando clicadas pelo usuário nos botões do menu.

Por exemplo, quando o usuário clica em "Principais Datas" a âncora leva até o local desejado, mas como o menu flutua ele fica por cima do título. Dá pra resolver mudando a posição do na página, mas isso também modifica a altura da página.

Vi alguns modelos de resolução utilizando JQuery, mas todos que testei não funcionaram.

Meu site: https://sienpro.catalao.ufg.br/

O que quero fazer é como esse exemplo: http://jsfiddle.net/yjcRv/346/

Estou usando esse código:

<script src="http://code.jquery.com/jquery-1.7.1.js"></script>

<script type="text/javascript">

$('a[href*=#]').bind("click", function(e) {

    var target = $(this).attr("href"); //Get the target
    var scrollToPosition = $(target).offset().top - 101;

    $('html,body').animate({ 'scrollTop': scrollToPosition }, 600, function(target){
        window.location.hash = target;
    });

    e.preventDefault();
});

</script>

Ah e os links do menu não estão definidos simplesmente como "#link", estão completos https://sienpro.catalao.ufg.br/#link, pois se o usuário estiver em outra página ele será redirecionado para página correta e a âncora irá levá-lo para posição definida.

2
  • Cara tem uma forma de fazer só com CSS e HTML, mas é meio que uma "gambiarra". Vc vai ter que fazer uma "Ancora Oculta" que vai evitar que o título fica encoberto pelo menu dando um espaço para o topo da página. Se quiser eu posto na resposta.
    – hugocsl
    Commented 13/03/2018 às 15:44
  • Se puder! Eu acho que seria uma das maneiras mais fáceis de resolver! Só quero que fique funcional. Commented 13/03/2018 às 16:13

4 Respostas 4

3

Percebi alguns problemas no código:

1º. Ao usar o animate do jQuery com âncoras, não use name="alvo"; use id="alvo". Portanto altere tudo que tiver name="alvo" para id="alvo" (ex., name="datas" para id="datas"). Mude também a tag de <a> para <div>, ficando <div id="alvo"></div>.

2º. Esta forma de capturar o click:

$('a[href*=#]').bind("click", function(e) {

Além de faltar aspas no #, procure não usar .bind, porque já foi descontinuado a partir da versão 3 do jQuery. Em vez disso, use .on().

Outra coisa, parece que esses <a> referenciados são dinâmicos e o jQuery não está conseguindo identificá-los. Para resolver isso, altere a forma de captura para:

$(document).on("click", 'a[href*="#"]', function(e) {

3º. Este código:

var scrollToPosition = $(target).offset().top - 101;

Percebi que 101 não é o valor correto. Use algo em torno de 200 porque precisa compensar aquele topo acima do menu. Então ficaria:

var scrollToPosition = $(target).offset().top - 200;

Então o código ficaria assim:

$(document).on("click", 'a[href*="#"]', function(e) {

    var target = $(this).attr("href"); //Get the target
    var scrollToPosition = $(target).offset().top - 200;

    $('html,body').animate({ 'scrollTop': scrollToPosition }, 600, function(){
       window.location.hash = target;
    });

    e.preventDefault();
});
0
1

Lucas com falei no comentário e vc pediu o exemplo vou explicar como que com CSS e HTML vc consegue resolver isso. Tudo bem que essa não é uma forma muito "elegante", mas pode resolver no seu caso.

A técnica concite em criar um elemento de 1px e cor transparente que vai funcionar como uma ancora oculta, com o position:absolut vc vai tirar esse elemento do fluxo da página e ele não vai interferir nos outros elementos.

Segue um exemplo prático para vc entender melhor

OBS: Eu deixei os comentário no código para facilitar

html {
    overflow-y: scroll;
    scroll-behavior: smooth;
} 
body {
    min-height: 2000px;
    padding-top: 70px;
}
div#header{
   position: fixed;
   top:0px;
   width:100%;
   height:80px;
   background: red;
   z-index: 999;
}

div#target{
   font-size:40px;
   border-top:1px solid red; 
   height: 80px;
}

/* Ancora Oculta - Classe do elemento que vai ser  */
#ancora1, #ancora2 {
    position: absolute;
    width: 1px;
    height: 1px;
    left: 0;
    margin-top: -100px; /* esse valor varia de acordo com a altura do seu Header, se ele tiver 200px de altura coloque aqui -220px por exemplo */
    background-color: transparent;
    z-index: -1;
}
<div id="header">
    <a href="#ancora1"># Ancora 1 #</a>
    <a href="#ancora2"># Ancora 2 #</a>
</div>

<div id="target" style="position: relative;">content!</div>
<div id="target">content!</div>
<div id="target" style="position: relative;">content!</div>
<div id="target">content!</div>
<!-- Elemento com o ID para fazer a Ancora 1 -->
<div id="ancora1"></div> 
<div id="target"># Ancora 1 #</div>
<div id="target">content!</div>
<div id="target">content!</div>
<!-- Elemento com o ID para fazer a Ancora 1 -->
<div id="ancora2"></div>
<div id="target"># Ancora 2 #</div>

Como eu disse não é uma técnica muito elegante, mas pode te ajudar sem precisar de JavaScript

2
  • #ancora1, #ancora2 { position: absolute; width: 1px; height: 1px; left: 0; margin-top: -100px; /* esse valor varia de acordo com a altura do seu Header, se ele tiver 200px de altura coloque aqui -220px por exemplo */ background-color: transparent; z-index: -1; } Essa parte resolveu, obrigado! Commented 13/03/2018 às 21:49
  • Lucas mas é essa parte ai mesmo que é o ouro rss. Ela que faz a mágica. Não é muito elegante, mas resolve.
    – hugocsl
    Commented 13/03/2018 às 22:07
0

Caso o elemento .menu-bar e .menu_component estejam com a classe "fixar" basta você subtrair o tamanho deles(que você disse ser 101px).

$('html,body').animate({ 'scrollTop': (scrollToPosition - (101 + 33)) }, 600, function(target){
    window.location.hash = target;
})

Agora se eles não estiverem com a classe "fixar" então além de subtrair o 10 do tamanho do menu você tem que tirar tbm o tamanho do elemento cabecalho(100) e do elemento first_place(33)

$('html,body').animate({ 'scrollTop': (scrollToPosition - (101 + 33 + 100 )) }, 600, function(target){
    window.location.hash = target;
})

Em um resumo da opera, você tem que calcular com o tamanho do elemento cabecalho e first_place

0

"Joguei" esse mesmo código no codepen trocando o bind por on e o seletor para ('#header > a') e funcionou:

Edit: aqui tinha o link para uma solução no codepen, porém fui advertido de não poder postar links externos.

conteudo do link:

HTML:

<div id="header">
    Header: <a href="#target">Click me!</a>
</div>

   <div id="target">My target content!</div>

JavaScript:

$('#header > a').on("click", function(e) {

var target = $(this).attr("href"); //Get the target
var scrollToPosition = $(target).offset().top - 80;

$('html').animate({ 'scrollTop': scrollToPosition }, 600, function(target){
        window.location.hash = target;
    });

    e.preventDefault();
});
4
  • Coloque o seu código na resposta. Evite links externos
    – hugocsl
    Commented 13/03/2018 às 15:56
  • Funciona, mas eu quero que funcione também quando o usuário acessar o link de outra página. Então quero desabilitar o "jump" automático pra hashtag, carregar a página e depois deslizar até a hashtag. Tentei fazer como esse link mas não consegui entender. stackoverflow.com/questions/27096621/… Commented 13/03/2018 às 16:49
  • Na verdade você pode adicionar o link, porém o ideal é adicionar um trecho relevante do link, pois o endereço da página pode expirar e a resposta se tornar "inválida". Commented 13/03/2018 às 16:49
  • Por exemplo quando vc acessa o link direto sienpro.catalao.ufg.br/#contato, ele já pula direto para onde está a ancoragem, sem passar pelo Javascript e aí o menu continua na frente do título. Mas se clicar em um botão que está href="#contato" ele realiza o scroll corretamente. Commented 13/03/2018 às 16:51

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .