Publicado em 2 de fev.

Como faço pra um box (div) flutuante descer junto com scroll da página

Já vi isso em vários blogs, mas não sei como faz:

Um box parado na página. você vai descendo a página e quando o box atinge o topo da página, ele começa a descer junto com o scroll.

Isso está sendo feito agora no Facebook. Quando o cara desce a página, o box do menu e das últimas atualizações cola no topo da página, e vai descendo junto com o scroll.

Como faz isso? Alguma luz?

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

xanburzum· 2 de fev.

você consegue fazer isso facilmente em javascript, ou até mesmo com Jquery, poste no fórumde javascript

Anderson Schmitt· 9 de fev.

este efeito pode ser produzido apenas com CSS, o segredo é o atributo Position: Fixed;

Esta página tem um exemplo do uso deste atributo: http://davidwalsh.na...ed-position.php

O código aplicado nesta página para conseguir este efeito é:

.element {position:fixed; top:2%; right:2%;}

Atenciosamente,

Anderson Schmitt

Diéssica· 9 de fev.

Com jQuery:

$(function () {
 var navigations = $('#menu'),
 pos = navigations.offset();
 $(window).scroll(function () {
 if ($(this).scrollTop() > pos.top + navigations.height() && navigations.hasClass('normal')) {
 navigations.fadeOut('fast', function () {
 $(this).removeClass('normal').addClass('estavel').fadeIn('fast')
 })
 } else if ($(this).scrollTop() <= pos.top && navigations.hasClass('estavel')) {
 navigations.fadeOut('fast', function () {
 $(this).removeClass('estavel').addClass('normal').fadeIn('fast')
 })
 }
 })
});

#menu = id da div (adiciona class="normal" nessa div)

normal = classe .normal pra div #menu

estavel = classe .estavel pra div #menu (como o Anderson falou, usamos fixed nela pra ela ficar com posição fixa na página)

.normal {position:relative;}
.estavel {position: fixed;top:0;z-index:1;}