Quando um visitante rola para baixo o seu blog para ver mais conteúdo, a lateral sidebar acompanha a rolagem e vai amostrando os gadgets laterais, mas quando a postagem é muito longa e acabam os elementos do menu lateral, ele fica todo branco.
Como deixar um banner fixo na lateral do blog:
<script> // gadgets fixos estimulanet.com.com // Tutorial at http://www.estimulanet.com/2014/07/como-colocar-widgets-flutuantes-fixos.html // Free to use or share, but please keep this notice intact. //<![CDATA[ bs_makeSticky("SUA_WIDGET_ID"); // enter your widget ID here function bs_makeSticky(elem) { var bs_sticky = document.getElementById(elem); var scrollee = document.createElement("div"); bs_sticky.parentNode.insertBefore(scrollee, bs_sticky); var width = bs_sticky.offsetWidth; var iniClass = bs_sticky.className + ' bs_sticky'; window.addEventListener('scroll', bs_sticking, false); function bs_sticking() { var rect = scrollee.getBoundingClientRect(); if (rect.top < 0) { bs_sticky.className = iniClass + ' bs_sticking'; bs_sticky.style.width = width + "px"; } else { bs_sticky.className = iniClass; } } } //]]> </script> <style> .bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;} </style>
Agora você deve localizar a ID HTML da widgets que você quer fixar e colocar onde está marcado em vermelho no código ("SUA_WIDGET_ID") mantendo a aspas e os parenteses.
5 Comentários
Incrível! O seu foi o único que deu certo no meu blog! Já estava perdendo as esperanças de conseguir rs...
ResponderExcluirObrigada por compartilhar!
Ele move apenas um gadget ou a barra lateral toda? Ele para antes do footer?
ResponderExcluirTop d+++ esse deu certo parabéns :)
ResponderExcluirMuito bom Mesmo o unico.. continui assim amigos!
ResponderExcluirQuem quiser ver vomo ficou de uma passadinha lá no meu site
www.coletividade-evolutiva.com.br
ANDRÉ SCHARTH Quero utiliza-lo nas minhas postagens mais vista, só que o problema é que ao rolar a pagina ate o final do site as postagens não para ela ultrapassa o rodapé do site, tem como você modificar o códico para ele parar de rolar ao chegar no rodapé? agradeço desde de já.
ResponderExcluirOs comentários são moderados, isso significa que ao clicar em enviar, eles não são publicados imediatamente, e sim após serem analisados.