sábado, 22 de outubro de 2016

Menu blogger fixo no topo desaparece quando rola a pagina



Hoje vamos mostrar como fazer um menu fixado no topo da pagina do Blogger e com um efeito legal de esconder quando rolar a pagina Colaboração de Dunia Blanter nesse tutorial, essa função pode ser vista em nosso template atual isso traz um efeito chamativo bem como torna o blogger mais profissional para usar esse menu siga os passos abaixo:


Como adicionar fixed menu hide when scrolling no blogger:

Faça login no Blogger então va no menu 
modelo editar >> HTML/JavaScript  com as teclas combinadas CTRL+F 
procure por: 

]]></b:skin> ou </style> e adicione o seguinte código antes:

/* Floating Wrapper CSS */
.float_wrapper{position:fixed;left:0;top:0;right:0;transition:all .3s ease-out;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
.scroll{top:-90px}
.no-scroll{top:0;z-index:99}

Adicione as seguintes tags no cabeçalho 
menu fixed hide when scrooling

class='float_wrapper'

Em seguida procure por </body> e acima disso copie e cole o seguinte código: 

<script type='text/javascript'>
//<![CDATA[
// Floating Menu
$(function(){var e=$(document).scrollTop();var t=$(".float_wrapper").outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()>=50){$(".float_wrapper").css("position","fixed")}else{$(".float_wrapper").css("position","fixed")}if(n>t){$(".float_wrapper").addClass("scroll")}else{$(".float_wrapper").removeClass("scroll")}if(n>e){$(".float_wrapper").removeClass("no-scroll")}else{$(".float_wrapper").addClass("no-scroll")}e=$(document).scrollTop()})})
//]]>
</script>

Salve  o modelo do template:

Gostou desse tutorial, foi util para você pode ajudar as outras pessoas também então compartilhe isso leva menos que 3 segundos.



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