Прокрутка и привязка к внутренним элементам с использованием jQuery

Question

У меня есть страница с тремя разделами, например. сверху, середине и снизу.

Каждая из секций имеет фиксированную высоту. Допустим, в этом случае 600 пикселей;

В средней части у меня есть контент, который превышает указанную высоту 600 пикселей. Напр. 1200px контента. Создание переполнения, внутренняя полоса прокрутки в средней части.

Мой вопрос:

Как я могу реализовать решение JQuery, который будет предоставлять следующий сценарий.

Пользователь прокручивает вниз верхнюю часть к средней части, а затем прокручивает основную прокрутку, переключаясь на средний - внутренний контент с переполнением с высотой 1200 пикселей. Как только они прокручиваются до конца содержимого, они покидают среднюю секцию, а прокрутка защелкивает/переключается обратно в конец раздела.

Можете ли вы предоставить решение?

Заранее спасибо

Answer 1

ОБНОВЛЕНО:

это, вероятно, не совсем так, как вы хотите работать, но это то, что вам нужно в пути: DEMO

var passed=false; 
$(document).scroll(function(){ 
    if($('body').scrollTop()>=$('#middle').offset().top && !passed){ 
     $('body').css('overflow','hidden'); 
     $('#container').css('overflow','auto'); 
     $('#container').attr("tabindex",-1).focus(); 
     $('#container').scrollTop(0); 
    } 
    else if($('body').scrollTop()<$('#middle').offset().top){ 
     passed=false; 
    } 
}); 
$('#container').scroll(function(){ 
    if($(this).scrollTop()+$(this).height()>=$('#long').height()){ 
     $(this).css('overflow','hidden'); 
     $('body').css('overflow','auto'); 
     passed=true; 
    } 
});