CSS/HTML: cómo hacer que algo se convierta en una posición absoluta una vez que te desplazas por él

Question

Soy nuevo en CSS y HTML aquí y estoy tratando de aprender cómo hacer que algo se posicione absolutamente una vez que te desplazas por él en la página .

Aquí hay un ejemplo de lo que quiero decir: http://fab.com/help/ (no necesita una cuenta para desplazarse). Cuando se desplaza hacia abajo, la barra de menú negra en la parte superior desaparece y la barra de menú blanca con "Cómo podemos ayudarlo" se posiciona completamente.

He creado un ejemplo de un sistema de menú similar,

http://jsfiddle.net/jkdbP/

pero no sé por dónde empezar a hacer que se convierta posición absoluta una vez que se desplaza por, muchas gracias por las ideas !

Answer 1

Ver este jsFiddle: http://jsfiddle.net/jkdbP/2/

var menuTop = $('.menu').offset().top; 
var menuClone = $('.menu').clone().addClass('fixed'); 

$(window).bind('scroll', function() { 
    var scrollY = window.pageYOffset; 

    if(scrollY > menuTop) { 
     if(menuClone.parent().length === 0) { 
      menuClone.appendTo($('.menu').parent()); 
     } 
    } else if(menuClone.parent().length > 0) { 
     menuClone.remove(); 
    } 
}); 

Usted puede usar jQuery de .offset().top para obtener la posición Y de su menú, y window.pageYOffset (o document.body.scrollTop de compatibilidad con IE anterior) para obtener el desplazamiento de desplazamiento de la página. A continuación, puede manejar el evento windowscroll.

Answer 2

leer sobre CSS position atributo y jQuery .scroll() método