在其他兩個div之間啓動和停止div滾動

Question

最近有人幫助我解決了這個問題的開始，但是我得到了更多的幫助。目前，我有這個工作 -

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

例在這裏 - jsFiddle

這從滾動一旦達到另一個div的邊界停止一個div - 偉大工程。我現在試圖弄清楚的是我怎樣才能讓div的START滾動，然後向下滾動並停在另一個div上，就像它在這個例子中一樣。任何人有任何想法？

下面是它的一個可怕的例子 - jsFiddle。藍色部分應該坐在黃色部分的下面，直到你到達它。由於我的大腦功能有限，我無法弄清楚這種可能性。

非常感謝您的幫助。

Answer 1

添加另一個參數，以你的函數傳遞開始元素，然後設置你的函數裏面的一些增值經銷商來存儲它的offset().top + height()作爲起始位置，然後添加另一if來檢查scrollTop()值不是開始一個較低的，像這樣：

var windw = this; 

$.fn.followTo = function (from, bumper) { //renamed "elem" to "bumper", to 
    var $this = this,      //prevent ambiguity 
     $window = $(windw), 
     $from = $(from), 
     $bumper = $(bumper), 
     $startPos = $from.offset().top + $from.height(), //new start position 
     bumperPos = $bumper.offset().top, 
     thisHeight = $this.outerHeight(), 
     setPosition = function(){ 
      if ($window.scrollTop() < $startPos) { //new if < startPos 
       $this.css({ 
        position: 'absolute', 
        top: $startPos //resets element to start position 
       }); 
      } else 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('#half', '#two'); 

JSFiddle