Como criar um menu ou anúncio fixo/flutuante na página ao rolar a tela

por Marcos Elias

Tem virado uma febre entre os blogueiros ultimamente deixar um trecho da barra lateral presente o tempo todo na tela ao rolar a página. Isso permite aumentar radicalmente o CTR, melhorando a visualização do conteúdo que estiver ali – seja um menu, botão para redes sociais, anúncio ou qualquer outra coisa.

O item fica normal no layout até o ponto em que a barra “acaba” durante a rolagem da tela. Então o item desejado é fixado no topo da tela, impedido de rolar mais para cima. Na prática tem-se um aumento do aproveitamento do espaço do site, já que, sem isso, o que o visitante veria provavelmente seria uma parte em branco.

Pesquisando alguns códigos cheguei a um bem simples no Ferramentas Blog. Lá o foco da dica era uso no Blogger/Blogspot para fixar os widgets/gadgets, ou na barra lateral do WordPress por meio de plugins (coisa que odeio, só uso plugins extremamente necessários). Na prática o código pode ser usado em qualquer página, afinal os blogs são meros sites também ;)

Código para fixar barra lateral ao rolar a tela

Será necessário incluir o jquery.min.js. Se seu site já usa isso, esse primeiro código é desnecessário (verifique no seu código-fonte, se não souber). Adicione isso imediatamente antes do fechamento do cabeçalho (</head>):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">

A outra parte maior deve ficar no local do seu objeto. Seu objeto não precisa ter nada de especial, não é necessário se preocupar em mudar classes, CSS, nada: basta pegar um item da barra lateral e colocar dentro desse código aqui:

<script type="text/javascript">
//<![CDATA[
(function($) {
var defaults = {
topSpacing: 0,
bottomSpacing: 0,
className: 'is-sticky',
wrapperClassName: 'sticky-wrapper'
},
$window = $(window),
$document = $(document),
sticked = [],
windowHeight = $window.height(),
scroller = function() {
var scrollTop = $window.scrollTop(),
documentHeight = $document.height(),
dwh = documentHeight - windowHeight,
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
for (var i = 0; i < sticked.length; i++) {
var s = sticked[i],
elementTop = s.stickyWrapper.offset().top,
etse = elementTop - s.topSpacing - extra;
if (scrollTop <= etse) {
if (s.currentTop !== null) {
s.stickyElement
.css('position', '')
.css('top', '')
.removeClass(s.className);
s.stickyElement.parent().removeClass(s.className);
s.currentTop = null;
}
}
else {
var newTop = documentHeight - s.stickyElement.outerHeight()
- s.topSpacing - s.bottomSpacing - scrollTop - extra;
if (newTop < 0) {
newTop = newTop + s.topSpacing;
} else {
newTop = s.topSpacing;
}
if (s.currentTop != newTop) {
s.stickyElement
.css('position', 'fixed')
.css('top', newTop)
.addClass(s.className);
s.stickyElement.parent().addClass(s.className);
s.currentTop = newTop;
}
}
}
},
resizer = function() {
windowHeight = $window.height();
},
methods = {
init: function(options) {
var o = $.extend(defaults, options);
return this.each(function() {
var stickyElement = $(this);
stickyId = stickyElement.attr('id');
wrapper = $('<div></div>')
.attr('id', stickyId + '-sticky-wrapper')
.addClass(o.wrapperClassName);
stickyElement.wrapAll(wrapper);
var stickyWrapper = stickyElement.parent();
stickyWrapper.css('height', stickyElement.outerHeight());
sticked.push({
topSpacing: o.topSpacing,
bottomSpacing: o.bottomSpacing,
stickyElement: stickyElement,
currentTop: null,
stickyWrapper: stickyWrapper,
className: o.className
});
});
},
update: scroller
};
if (window.addEventListener) {
window.addEventListener('scroll', scroller, false);
window.addEventListener('resize', resizer, false);
} else if (window.attachEvent) {
window.attachEvent('onscroll', scroller);
window.attachEvent('onresize', resizer);
}
$.fn.sticky = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method ) {
return methods.init.apply( this, arguments );
} else {
$.error('Method ' + method + ' does not exist on jQuery.sticky');
}
};
$(function() {
setTimeout(scroller, 0);
});
})(jQuery);

//]]>
</script>
<script>
$(document).ready(function(){
$("#rbtSocialFloat").sticky({topSpacing:0});
$("#topside_box").sticky({topSpacing:6});
});
</script>
<div class="sticky-wrapper" id="topside_box-sticky-wrapper" style="height: 222px;text-align:center;"><div id="topside_box-sticky-wrapper" class="sticky-wrapper" style="height: 112px;"><div class="" id="topside_box" style="">
INSIRA AQUI O CODIGO DO BANNER, MENU, BOTÃO OU O QUE FOR!
</div></div></div>

No local do texto em vermelho você deve colocar o código do objeto desejado. Note que, no WordPress, se for um widget, deverá ser o código inteiro do widget – com todas as DIVs e UL/LIs correspondentes. Se colocar só o código da publicidade, banner, caixa etc, o quadro vai rolar normalmente e só o que estiver no código acima ficará fixo.

Exemplo de como ficaria (o banner verde):

Estou usando no momento para divulgar meu site de dicas para aprimorar ou aprender inglês. <jaba>aliás, dicas fundamentais para quem lida com web, já que sabendo inglês você pode aprender diretamente na fonte, entenderá melhor os conceitos do WordPress e de outros sistemas de CMS e blogs, poderá aproveitar milhares de tutoriais gratuitos na internet… Lembre-se que a maioria do conteúdo da internet é em inglês ;) </jaba>

No WordPress você pode editar diretamente o arquivo da barra lateral (sidebar). No Blogger, coloque o código onde ficaria seu gadget/widget. Não recomendo usar plugins para isso por questão de desempenho: é um código que pode muito bem ficar estático na página, sem depender de nada dinâmico (referente aos posts, comentários, conteúdo do blog, etc). Evitar usar plugins é bom para evitar chamadas desnecessárias às funções do WordPress e acessos ao banco de dados, poupando assim tempo de processamento e memória do seu servidor (afinal hospedagem ilimitada não existe).

Pode usar AdSense flutuante na barra lateral?

Não sei. Há informações controversas sobre isso. Explicitamente o AdSense não permite o uso de caixas flutuantes. Ao mesmo tempo que essa dica serve para criar um elemento que “flutua” ao rolar a página, na verdade para o visitante a sensação é que o objeto está fixo. Não se trata de um flutuante que indique movimento, nada para chamar a atenção de maneira imoral ou irritante. Apenas aproveita melhor o espaço da página que normalmente ficaria em branco ou exibindo a cor de fundo, otimizando assim a experiência do próprio usuário. O espaço destinado ao site é melhor aproveitado.

Como as taxas de visualização desta área serão maiores, as chances de ganhar mais dinheiro com anúncios assim também são. Há controversas no que diz respeito ao AdSense, vale tentar contato com o pessoal do Google antes de implementar na sua página. Tem um monte de gente usando, mas também já ouvi falar de casos em que o pessoal do Google pediu para remover.

Todavia, lembre-se: o site é seu! Você faz o que você quiser para aprimorar a experiência do visitante. Se não se sentir seguro em usar AdSense (eu não recomendaria até ter certeza que pode), utilize para divulgar seus próprios serviços ou sites, com banners próprios ou de outras redes de publicidade. Ou ainda a caixa de likes do Facebook… Promoção de posts populares… Quem tem vários sites pode se beneficiar bastante divulgando os demais assim, tendo publicidade gratuita da própria “casa” ;)

Enfim, é um baita espaço considerável que quase todos os sites desperdiçavam. Em 2013 essa moda de barra lateral que fica fixa ao rolar a tela pegou pra valer!

Observação: Aparentemente há algo errado nesse código, ele faz o elemento ir pouca coisa para a esquerda quando ele é “fixado”. Estou tentando corrigir e/ou achar algo melhor, não deve ser tão difícil… O efeito passa despercebido na maioria dos casos, mas para perfeccionistas pode ser chato.