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

[AspAL 0]

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?

[xanburzum 169]

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

[Anderson Schmitt 0]

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 140]

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;}