sexta-feira, 13 de maio de 2016

Discroll menu navegação no Blogger

sticky-menu-navigation-discroll-blogger



Hoje vamos apresentar efeito discroll blog esse efeito é muito usado e cria uma interação com o usuário quando o mesmo rola  a pagina para baixo ele faz o efeito sticky para fixar a navegação o que vai disponibilizar a navegação por categorias do menu mesmo quando o rolamos a pagina para ver o efeito  veja nesse template role a pagina para baixo  clique aqui


Como adicionar efeito discroll menu navegação Blogger

Faça login no Blogger no painel clique em
Modelo então editar >> HTML/JavaScript
com as teclas combinadas CTRL+F busque por </body> então copie e cole o seguinte código antes disso.




<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('.nav').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.nav').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>
Verifique qual o nome do seu widget no código fonte esse por exemplo é .nav mas se for menu adicione o esse outro código abaixo.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('#menu').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('#menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#menu').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>
Salve e pronto.

Créditos Contoh
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner