Zatrzymaj div przewijanie po dotarciu do innego div

Question

Zasadniczo mam obecnie div, który pozostaje stały i podąża za użytkownikiem w trakcie przewijania, aż osiągnie określony punkt. Mogę z łatwością sprawić, że zatrzyma się na ustalonej pozycji piksela, tak jak to zrobiłem w poniższym przykładzie, ale ponieważ jestem idiotą jQuery, nie mam pojęcia, jak sprawić, by zatrzymał się na divie.

Oto co Używałem do tej pory:

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); 

Oto przykład: jsFiddle

Powodem chcę go zatrzymać po osiągnięciu drugiego div dlatego z układem płynnej I” m używając, drugi div będzie siedział w różnych punktach w zależności od rozmiaru przeglądarki. Zdefiniowanie konkretnego punktu, w którym ma się zatrzymać, nie będzie działać. Czy ktoś ma jakieś pomysły na to, w jaki sposób mogę zrobić to, czego chcę? Alternatywnie, czy stały div może przestać przewijać, gdy osiągnie procent drogi w dół? Rozejrzałem się, ale niczego nie znalazłem.

Dzięki za pomoc.

Answer 1

Czy tego właśnie szukasz?

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: o swoim żądaniu nie przewijania aż w pewnym momencie po prostu zastąpić to:

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

z tym:

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

Answer 2

Zainspirowany skrzypce MicronXD za , ale napisany, aby być bardziej elastycznym, gdy DOM jest mocno naciągany na dokument Obciążenie ument (lub z innych powodów), oto inny podobny rozwiązanie opracowałem dla własnego użytku:

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(); }); 
    } 
}); 

Następnie można uruchomić funkcję jako takie:

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

60 jest opcjonalnym margines chcesz element pływający, który ma mieć u góry ekranu w pozycji: ustalony, wyrażony w pikselach.