Hacer elemento fijo en desplazamiento

Después de investigar con especialistas en el tema, programadores de diversas áreas y profesores hemos dado con la respuesta a la cuestión y la dejamos plasmada en esta publicación.

Solución:

Puedes hacer eso con jQuery fácil:

http://jsfiddle.net/jpXjH/6/

var elementPosition = $('#navigation').offset();

$(window).scroll(function()
        if($(window).scrollTop() > elementPosition.top)
              $('#navigation').css('position','fixed').css('top','0');
         else 
            $('#navigation').css('position','static');
            
);

No me molestaría con jQuery o LESS. Un marco de javascript es excesivo en mi opinión.

window.addEventListener('scroll', function (evt) 

  // This value is your scroll distance from the top
  var distance_from_top = document.body.scrollTop;

  // The user has scrolled to the tippy top of the page. Set appropriate style.
  if (distance_from_top === 0) 

  

  // The user has scrolled down the page.
  if(distance_from_top > 0) 

  

);

Hay algunos problemas para implementar esto que la respuesta original aceptada no responde:

1. los onscroll El evento de la ventana se dispara muy a menudo. Esto implica que tiene que usar un oyente muy eficaz o tiene que retrasar al oyente de alguna manera. El creador de jQuery, John Resig, explica aquí cómo se puede implementar un mecanismo retrasado y las razones por las que debería hacerlo. En mi opinión, dados los navegadores y entornos actuales, un oyente eficaz también lo hará. Aquí hay una implementación del patrón sugerido por John Resig
2. La forma en que position:fixed funciona en css, si se desplaza hacia abajo en la página y mueve un elemento desde position:static para position: fixed, la página “saltará” un poco porque el documento “pierde” la altura del elemento. Puede deshacerse de eso agregando la altura a la scrollTop y reemplace la altura perdida en el cuerpo del documento con otro objeto. También puede usar ese objeto para determinar si el elemento adhesivo ya se ha movido a position: fixed y reducir las llamadas al código revirtiendo position: fixed al estado original: mira el violín aquí
3. Ahora, lo único costoso en términos de rendimiento que el controlador realmente está haciendo es llamar scrollTop en cada llamada. Dado que el controlador de límite de intervalo también tiene sus inconvenientes, iré tan lejos como para argumentar aquí que puede volver a conectar el detector de eventos al evento de desplazamiento original para que se sienta más ágil sin muchas preocupaciones. Sin embargo, tendrá que perfilarlo en cada navegador al que se dirija o admita. Míralo funcionando aquí

Aquí está el código:

JS

/* Initialize sticky outside the event listener as a cached selector.
 * Also, initialize any needed variables outside the listener for 
 * performance reasons - no variable instantiation is happening inside the listener.
 */
var sticky = $('#sticky'),
    stickyClone,
    stickyTop = sticky.offset().top,
    scrollTop,
    scrolled = false,
    $window = $(window);

/* Bind the scroll Event */
$window.on('scroll', function (e) 
    scrollTop = $window.scrollTop();

    if (scrollTop >= stickyTop && !stickyClone) 
        /* Attach a clone to replace the "missing" body height */
        stickyClone = sticky.clone().prop('id', sticky.prop('id') + '-clone')
        stickyClone = stickyClone.insertBefore(sticky);
        sticky.addClass('fixed');
     else if (scrollTop < stickyTop && stickyClone) 
        /* Since sticky is in the viewport again, we can remove the clone and the class */
        stickyClone.remove();
        stickyClone = null;
        sticky.removeClass('fixed');
    
);

CSS

body 
    margin: 0

.sticky 
    padding: 1em;
    background: black;
    color: white;
    width: 100%

.sticky.fixed 
    position: fixed;
    top: 0;
    left: 0;

.content 
    padding: 1em

HTML

  

    
Some Content above sticky
    ...some long text...
  
  
This is sticky
  

    
Some Random Page Content
...some really long text...
  

Recuerda que puedes optar por la opción de reseñar tu experiencia si encontraste tu enigma .

---

---

Utiliza Nuestro Buscador