Estava desenvolvendo um projeto e encontrei 2 coisas que procurava em links separados, uma delas é um menu que acompanha a rolagem, que fique fixado no topo e outra era fazer 1 página utilizando "âncoras" no menu, quando clicasse rolava para a posição da página que eu queria.
Por ter pego links de tutoriais de outros desenvolvedores, segue aqui o link que utilizei para fazer os dois juntos:
STICKY NAVIGATION
SMOOTH SCROLL EFFECT ANCHOR
Acho que não necessita de explicação detalhada, pois baixando o arquivo você conseguirá ver como foram utilizados, só vou separar os detalhes de cada um para não deixar escapar algo na hora que for usar.
EXEMPLO LIVE
<code>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- Bootstrap jQuery plugins compiled and minified -->
<script src="js/bootstrap.min.js"></script>
<script src="js/waypoints.js"></script>
<script src="js/waypoints-sticky.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//para remover o menu "grudado" é só comentar esta linha
$('.menu-stick').waypoint('sticky');
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({ 'scrollTop': $target.offset().top }, 900, 'swing', function () {
window.location.hash = target;
});
});
});
</script>
</code>
Linha de código para funcionar o menu sticky, lembrando que o que for ser fixo deverá ter a classe .menu-stick ou qualquer outro nome, lembre de alterar ali no script.
Bloco de código que funciona para o menu anchor, lembrando que cada bloco deve ter um ID único:
<div id="menu1"></div>
e no anchor do menu href deverá ser referenciado esse mesmo ID
<a href="#menu1">Menu 1</a>
É isso! Se ficar alguma dúvida e eu puder ajudar, comenta abaixo que nos falamos!
Segue o link para baixar os arquivos completo.
DOWNLOAD
EXEMPLO LIVE (example)
Nenhum comentário:
Postar um comentário