barra lateral que sigue de desplazamiento, pero se desplaza hacia uno mismo, si es más alto que la ventana gráfica

Question

(Hey, primer mensaje desde un lurker desde hace mucho tiempo :)

He construido una barra lateral simple que hace el 'absolute-to-fixed' truco para permanecer en la pantalla, pero me gustaría tener en cuenta los escenarios, donde la barra lateral es más alta que la ventana gráfica.

Así que se me ocurrió esta idea. Todo comienza como en el ejemplo anterior:

• En la carga de la página, la barra lateral se dibuja en la ubicación inicial, a cierta distancia de la parte superior de la ventana gráfica.
• Cuando el usuario desplaza la página, la barra se mueve con el contenido
• Si la barra lateral se ajusta a la ventana verticalmente, se fija a la parte superior

Pero aquí se hace más dinámico:

• Si la barra lateral es más alta que la ventana gráfica, continúa para desplazarse con el contenido hasta que se alcance el inferior de la barra lateral, y lo corrige allí. La parte superior de la barra lateral se desplaza más allá de la parte superior de la ventana gráfica.

• Cuando el usuario se desplaza de nuevo hacia arriba la página, la barra se mueve con el contenido hasta que el parte superior de la barra lateral se alcanza, y se fija allí. La parte inferior de la barra lateral se desplaza más allá de la parte inferior de la ventana gráfica.

De esta manera, la barra lateral reacciona al desplazamiento como de costumbre, mientras se pega lo suficientemente cerca para encontrar en las páginas largas.

Cualquier punteros a los ejemplos, o los fragmentos de código jQuery-friendly serían muy apreciados.

Answer 1

Algo como esto podría funcionar. No lo he probado, pero en teoría se ve bien.

$(function(){ 
    var standardPosition = $('whatYouWantToScroll').offset().top; 
    // Cache the standard position of the scrolling element 
    $(window).scroll(function() { 
     if ($(this).scrollTop() < standardPosition) { 
      // if scroll pos is higher than the top of the element 
      $('whatYouWantToScroll').css({ 
       position: 'relative', 
       top: '0px' 
      }); 
     } else if ($(window).scrollTop() > $('somethingToReferenceOnTheBottom').offset().top-($('whatYouWantToScroll').height())) { 
      // if scroll position is lower than the top offset of the bottom reference 
      // + the element that is scrolling height 
      $('whatYouWantToScroll').css({ 
       position: 'absolute', 
       top: $('somethingToReferenceOnTheBottom').offset().top-($('whatYouWantToScroll').height()) 
      }); 
     } else { 
      // otherwise we're somewhere inbetween, fixed scrolling. 
      $('whatYouWantToScroll').css({ 
       position: 'fixed' 
      }); 
     } 
    }); 
}); 

Answer 2

que necesita esta funcionalidad exacta para un sitio, y esto es lo que me ocurrió, parece que funciona muy bien ... Sé que este post es viejo, pero supongo que algunas personas pueden tener un interés en esto de todos modos;)

(function($){ 
    $(document).ready(function(){ 
    sidebar_offset=$('#header').height()+10; 
    $(window).scroll(function(){ 
     var sidebar=$('#primary'); 
    if($(this).scrollTop()<sidebar_offset){ 
     var height=$(window).height()-(sidebar_offset-$(this).scrollTop()); 
     css={height:height,marginTop:0}; 
     sidebar[0].scrollTop=0; 
    }else{ 
     css.height=$(this).height(); 
     if($(this).scrollTop()>sidebar_offset){ 
      if(this.lastTop>$(this).scrollTop()){ 
       sidebar[0].scrollTop=sidebar[0].scrollTop-(this.lastTop-$(this).scrollTop()); 
      }else{ 
       sidebar[0].scrollTop=sidebar[0].scrollTop+($(this).scrollTop()-this.lastTop); 
      } 

      css.marginTop=($(this).scrollTop()-sidebar_offset)+'px'; 
     }else{ 
      sidebar[0].scrollTop=0; 
     } 
    } 
    sidebar.css(css); 
    this.lastTop=$(this).scrollTop(); 
    }); 
})(jQuery); 

Answer 3

El comportamiento que desea lograr se llama 'affix'. El framework front-end de Twitter Bootstrap tiene un componente de JavaScript que puede hacer lo que le gustaría obtener. Por favor, consulte el section about the affix component. De hecho, allí también puede ver una demostración del comportamiento deseado, el menú en la barra lateral izquierda está adherido.

Puede definir las funciones para el parámetro de compensación de la llamada afix init, por lo que se puede determinar dinámicamente cuándo fijar/desanclar el elemento. Para ver un ejemplo en contexto, verifique el origen de la página vinculada anterior, busque específicamente application.js, contiene la configuración del afijo que puede ver en el lado izquierdo. Aquí se puede ver el código de inicio fuera de contexto:

// side bar 
$('.bs-docs-sidenav').affix({ 
    offset: { 
    top: function() { return $window.width() <= 980 ? 290 : 210 } 
    , bottom: 270 
    } 
}) 

Es probable que también vale la pena comprobar en las fuentes de la hoja de estilo de página docs.css, que contiene algo de posicionamiento y el estilo para el elemento fijada.Verificar esto podría resolver su problema, o al menos podría darle una idea.

Answer 4

También solicitó ejemplos; Un ejemplo que encuentro regularmente es la columna derecha de anuncios de Facebook. Es más alto que la ventana gráfica y se desplaza más allá del primer o segundo anuncio y se detiene en el tercero. Creo que esto se define por la ubicación del tercer anuncio en lugar de la altura total de la barra lateral, pero es un ejemplo de trabajo.

http://facebook.com

screenhots: http://i.imgur.com/dM3OZ.jpg/parte superior de la página http://i.imgur.com/SxEZO.jpg/más abajo

Answer 5

tuve esta idea exacta para un proyecto, aquí hay un ejemplo de cómo implementarlo

http://jsfiddle.net/ryanmaxwell/25QaE/

Answer 6

Dado que ninguno de esos ejemplos me venía bien, hice esto y me gusta compartir:

JS

$(function() { 
    var element = $('.right-container'); 
    var originalY = element.offset().top; 
    var lastOffset = $(document).scrollTop(); 
    var diffToBottom = element.height() - $(window).height(); 

    $(window).on('scroll', function (event) { 
     var scrollTop = $(window).scrollTop();   
     var currentOffset = $(document).scrollTop(); 
     var isScrollingDown = currentOffset > lastOffset; 

     if (scrollTop > (diffToBottom + element.height())) { 
      if (!element.hasClass('relative')) { 
       element.css('top', scrollTop - (originalY + diffToBottom) + 'px'); 
       element.addClass('relative'); 
      } 

      if (isScrollingDown) { 
       var newTop = scrollTop < lastOffset ? 0 : scrollTop - (originalY + diffToBottom); 
      } 
      else if (scrollTop < element.offset().top) { 
       var newTop = scrollTop - (originalY); 
      } 

      element.stop(false, false).animate({ 
       top: newTop 
      }, 300); 
     } 
     else { 
      if (scrollTop < originalY) { 
       element.removeClass('relative'); 
      } 

      element.stop(false, false).animate({ 
       top: scrollTop - (originalY) 
      }, 300); 
     } 

     lastOffset = currentOffset; 
    }); 
}); 

CSS

.relative { 
    position: relative; 
} 

que se desplaza hacia abajo suavemente cuando el elemento toca fondo y se desplaza hacia arriba y cuando se golpea la parte superior.