Запуск и остановка прокрутки div между двумя другими divs

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, затем прокрутить вниз и остановиться в другом 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