Stop div scrolling una vez que alcanza otro div

Básicamente actualmente tengo un div que se mantiene fijo y sigue al usuario hacia abajo a medida que se desplaza hasta llegar a un cierto punto. Puedo hacer que se detenga fácilmente en una posición fija de píxel como lo hice en el ejemplo siguiente, pero como soy un idiota jQuery, no tengo idea de cómo detenerlo en un div.Stop div scrolling una vez que alcanza otro div

Esto es lo que he usado hasta ahora:

var windw = this; 

$.fn.followTo = function (pos) { 
    var $this = this, 
     $window = $(windw); 

$window.scroll(function(e){ 
    if ($window.scrollTop() > pos) { 
     $this.css({ 
      position: 'absolute', 
      top: pos 
     }); 
    } else { 
     $this.css({ 
      position: 'fixed', 
      top: 0 
     }); 
    } 
}); 
}; 

$('#one').followTo(400);

Aquí está el ejemplo: jsFiddle

La razón por la que quiero que se detenga una vez que llega una segunda div es porque con la disposición de fluidos I' m using, el segundo div estará sentado en diferentes puntos dependiendo del tamaño del navegador. Definir un punto específico para que se detenga no funcionará. ¿Alguien tiene alguna idea de cómo puedo lograr que haga lo que quiero? Alternativamente, ¿es posible que el div fijo deje de desplazarse una vez que alcanza un porcentaje del camino hacia abajo? He mirado alrededor pero no he encontrado nada.

Gracias por cualquier ayuda.

Fuente

2012-06-12 mattmouth

¿Esto es lo que estabas buscando?

http://jsfiddle.net/Tgm6Y/1447/

var windw = this; 

$.fn.followTo = function (elem) { 
    var $this = this, 
     $window = $(windw), 
     $bumper = $(elem), 
     bumperPos = $bumper.offset().top, 
     thisHeight = $this.outerHeight(), 
     setPosition = function(){ 
      if ($window.scrollTop() > (bumperPos - thisHeight)) { 
       $this.css({ 
        position: 'absolute', 
        top: (bumperPos - thisHeight) 
       }); 
      } else { 
       $this.css({ 
        position: 'fixed', 
        top: 0 
       }); 
      } 
     }; 
    $window.resize(function() 
    { 
     bumperPos = pos.offset().top; 
     thisHeight = $this.outerHeight(); 
     setPosition(); 
    }); 
    $window.scroll(setPosition); 
    setPosition(); 
}; 

$('#one').followTo('#two');

EDIT: sobre su solicitud a no desplazarse hasta un cierto punto, basta con sustituir la siguiente:

if ($window.scrollTop() > (bumperPos - thisHeight)) {

con esto:

if ($window.scrollTop() <= (bumperPos - thisHeight)) {

Fuente

2012-06-12 03:26:05 MicronXD

¡Dios mío, funciona! Ahora ve y descubre por qué funciona. MicronXD, eres un caballero y un erudito, muchas gracias ridículamente. – mattmouth

Disculpas de antemano por ser tan necesitado jaja. ¿Es posible agregar de alguna manera ese código en particular a algo similar a esto - http://jsfiddle.net/cpL69/13/ - como en, el div no comienza a desplazarse hasta que se alcanza y luego termina en el segundo div como lo hizo en tu ejemplo? – mattmouth

lo agregó al final de la respuesta. NP ... esto es lo que paso todo el día haciendo ... sin embargo, de alguna manera todavía me da placer ganar "puntos de internet sin sentido" por hacer más de eso. Podría ser más eficiente, pero estoy ocupado atm. Voy a apretarlo más tarde para ti. – MicronXD

Inspirado por el violín de MicronXD , pero escrito para ser más flexible cuando el DOM se está presionando mucho en el documento carga ument (o por otras razones), aquí hay otra solución similar que he desarrollado en mi propio uso:

jQuery.fn.extend({ 
    followTo: function (elem, marginTop) { 
    var $this = $(this); 
    var $initialOffset = $this.offset().top; 
    setPosition = function() { 
     if ($(window).scrollTop() > $initialOffset) { 
     if (elem.offset().top > ($(window).scrollTop() + $this.outerHeight() + marginTop)) { 
      $this.css({ position: 'fixed', top: marginTop }); 
     } 
     if (elem.offset().top <= ($(window).scrollTop() + $this.outerHeight() + marginTop)) { 
      $this.css({ position: 'absolute', top: elem.offset().top - $this.outerHeight() }); 
     } 
     } 
     if ($(window).scrollTop() <= $initialOffset) { 
     $this.css({ position: 'relative', top: 0 }); 
     } 
    } 
    $(window).resize(function(){ setPosition(); }); 
    $(window).scroll(function(){ setPosition(); }); 
    } 
});

continuación, puede ejecutar la función como tal:

$('#div-to-move').followTo($('#div-to-stop-at'), 60);

60 es el margen opcional desea que el elemento flotante para tener desde la parte superior de la pantalla cuando está en posición: fijo, expresado en píxeles.

Fuente

2013-06-13 02:01:20 Adal

Stop div scrolling una vez que alcanza otro div

Respuesta

Cuestiones relacionadas