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.