2014-09-13 44 views
1

我有一個涉及3個部分的頁面,例如,頂部,中部和底部。使用jQuery滾動和捕捉內部元素

每個部分都是固定的高度。讓我們說在這種情況下600px;

在中間部分,我有一些內容超過了規定的600px高度。對於例如內容1200px。在中間部分創建一個溢出,一個內部滾動條。

我的問題是:

我如何能實現一個jQuery的解決方案,將提供以下方案。

用戶向下滾動到頂部到中間部分,主滾動然後捕捉/切換到中間內容,溢出高度爲1200px。一旦他們滾動到內容的結尾,他們離開中間部分,滾動按鈕/切換回結束部分。

您能否提供解決方案?

在此先感謝

+0

無法使用原生滾動條執行此操作。應該能夠找到它的滾動條插件 – charlietfl 2014-09-13 19:04:51

回答

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; 
    } 
}); 
+0

是的,這就是解決方案的問題。你不完全是什麼意思?我會嘗試通過實施並回復你:)謝謝! – cwiggo 2014-09-13 19:40:56

+1

不客氣,我更新了答案,再次檢查,我解決了來回問題(即,如果用戶向下滾動然後再滾動然後再滾下去)。 – 2014-09-13 19:45:06