Dừng div di chuyển khi nó đạt đến một div

Question

Về cơ bản tôi hiện đang có một div mà vẫn cố định và sau người dùng xuống khi họ di chuyển cho đến khi nó đạt đến một điểm nhất định. Tôi có thể dễ dàng làm cho nó dừng lại ở một vị trí pixel cố định như tôi đã làm trong ví dụ dưới đây, nhưng bởi vì tôi là một idiot jQuery tôi không có ý tưởng làm thế nào để làm cho nó dừng lại ở một div thay thế.

Đây là những gì tôi đã sử dụng cho đến nay:

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

Dưới đây là ví dụ: jsFiddle

Lý do tôi muốn nó dừng lại khi nó đạt đến một div thứ hai là bởi vì với cách bố trí chất lỏng tôi m sử dụng, div thứ hai sẽ được ngồi ở các điểm khác nhau tùy thuộc vào kích thước trình duyệt. Xác định một điểm cụ thể để dừng tại sẽ không hoạt động. Bất cứ ai có bất kỳ ý tưởng như thế nào tôi có thể nhận được điều này để làm những gì tôi muốn? Ngoài ra, có thể cho div cố định ngừng cuộn khi đạt đến một tỷ lệ phần trăm không? Tôi đã nhìn xung quanh nhưng không tìm thấy gì cả.

Cảm ơn bạn đã được trợ giúp.

Answer 1

Đây có phải là những gì bạn đang tìm kiếm?

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: về yêu cầu của bạn không di chuyển cho đến một điểm nhất định, chỉ cần thay thế này:

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

với điều này:

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

Answer 2

Lấy cảm hứng từ fiddle MicronXD của , nhưng được viết để linh hoạt hơn khi DOM bị đẩy xung quanh rất nhiều trên tài liệu tải ument (hoặc lý do khác), đây là một giải pháp tương tự tôi phát triển cho việc sử dụng của riêng tôi:

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

Sau đó, bạn có thể chạy các chức năng như vậy:

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

60 là biên độ tùy chọn bạn muốn phần tử nổi có từ trên cùng của màn hình khi ở vị trí: cố định, được biểu thị bằng pixel.