Cómo hacer una position falsa del elemento: ¿se fija para que funcione fijo hasta cierta altura de desplazamiento, luego se une?

Varios sitios web tienen una característica, donde un elemento aparece fijo en la página mientras se desplaza HASTA que llegue a un punto determinado, como el final de una barra lateral, y luego se ancla en la parte inferior de esa barra lateral. Una vez que se desplaza hacia atrás, comienza a actuar como un elemento fijo, permaneciendo en la pantalla mientras se desplaza.

¿Cómo se llama esto y cómo se hace?

Puede establecer la position en evento de desplazamiento absoluto y adjunto a la página y en ese caso puede cambiar el valor css superior según la position de la barra de desplazamiento (en jQuery es scrollTop en javascript puro debería ser similar) y luego agrega la condición de que la parte superior está cambiada solo si scrollTop es menor que el valor específico como offset.top + height de la barra lateral.

Puede usar https://github.com/wduffy/jScroll pero sé que eso no es exactamente lo que está buscando, hay un retraso entre el desplazamiento y el div que está a la vista, constantemente tiene que ponerse al día.

la raíz del código es el controller .scroll() jQuery , por lo que es un buen punto de partida. Por lo que yo sé, no hay un nombre oficial para este efecto, pero lo he visto describir tantos lugares, ahora que alguien quiere saberlo, ¡no puedo encontrarlo!

EDITAR Esto es lo que estaba buscando: Encabezados persistentes en CSS-Tricks

los fundamentos de la técnica de Chris Coyier son html:

 <article class="persist-area"> <h1 class="persist-header"> <!-- stuff and stuff --> </article> 

css:

 .floatingHeader { position: fixed; top: 0; visibility: hidden; } 

y jQuery:

  function UpdateTableHeaders() { $(".persist-area").each(function() { var el = $(this), offset = el.offset(), scrollTop = $(window).scrollTop(), floatingHeader = $(".floatingHeader", this) if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) { floatingHeader.css({ "visibility": "visible" }); } else { floatingHeader.css({ "visibility": "hidden" }); }; }); } // DOM Ready $(function() { var clonedHeaderRow; $(".persist-area").each(function() { clonedHeaderRow = $(".persist-header", this); clonedHeaderRow .before(clonedHeaderRow.clone()) .css("width", clonedHeaderRow.width()) .addClass("floatingHeader"); }); $(window) .scroll(UpdateTableHeaders) .trigger("scroll"); }); 

Escuche el evento de desplazamiento, cuando se desplazan más allá del elemento que desea permanecer a la vista, cambia los elementos a su position para 'arreglar'.

Creé un jsFiddle que ilustra esto: http://jsfiddle.net/luisperezphd/EcsS6/

Hay un par de cosas a tener en count, por ejemplo, un elemento fijo será el relativo a la window o el primer elemento primario con una position: relative .

En segundo lugar, cuando cambia un elemento a fixed , queuepsa el espacio en el que solía estar y provoca que el contenido debajo de él se mueva hacia arriba. Si desea que el efecto parezca uniforme, debe colocar algo en su lugar que ocupe la misma cantidad de espacio que lo hizo.

En mi ejemplo de jsFiddle, lo conseguí envolviendo el elemento de encabezado dentro de otro elemento y luego estableciendo su altura para que coincida (programáticamente). Sin embargo, hay varias forms diferentes en que podrías haberlo logrado.

También includeé el siguiente código, en mi ejemplo utilizo jQuery.

JavaScript:

 var $header = $("#header"); var HeaderOffset = $header.position().top; $("#headerContainer").css({ height: $header.height() }); $("#container").scroll(function() { if($(this).scrollTop() > HeaderOffset) { $header.addClass("fixedTop"); } else { $header.removeClass("fixedTop"); } }); 

CSS:

 #containerParent { position: relative; width: 180px; } #container { height:200px; overflow:auto; } #header { background:black; color:white; width: 100%; } .fixedTop { position: absolute; top: 0; } 

Muestra de HTML:

 <h1>Fixed Position Header - after a point</h1> <div id="containerParent"> <div id="container"> This text is an example of content that might occur before the header. <div id="headerContainer"> <div id="header">Header</div> </div> <div> Below is enough content to trigger scrolling. line 1 <br/> line 2 <br/> line 3 <br/> line 4 <br/> line 5 <br/> line 6 <br/> line 7 <br/> line 8 <br/> line 9 <br/> line 10 <br/> line 11 <br/> line 12 <br/> line 13 <br/> line 14 <br/> line 15 <br/> </div> </div> </div>