2017-02-21 64 views
0

我試圖讓一個側欄以較慢的速度滾動,直到達到某個點。當用戶達到該設定點時,側邊欄應該停止滾動。這裏是我的jQuery代碼:如何在條件滿足後重新運行事件功能?

$(window).on("scroll", function() { 
    var sidebar = $('.sidebar'); 
    var stopPoint = $('#stop-point'); 
    var sidebarBottom = sidebar.offset().top + sidebar.height(); 
    var stopPointBottom = stopPoint.offset().top + stopPoint.height() - 30; 

    if (sidebarBottom > stopPointBottom) { 
     $('.sidebar').css({'top' : "288px"}); 
    } 
    else { 
     $('.sidebar').css({'top' : ($(this).scrollTop()/3)+"px"}); 
    } 
}); 

在ELSE條件是這樣的情況下,一切都很好。問題在於IF條件滿足時,即使再次向上滾動並再次滿足ELSE條件,邊欄仍保持在最低點。

如果有人能夠幫助我瞭解我做錯了什麼,以及是否有更智能的方法來實現,我將不勝感激。

在此先感謝。

+0

Eww,[不要滾動劫持](https://envato.com/blog/scroll-hijacking/) –

回答

0

如果有人有興趣在這裏是如何,我已經修復它:

$(window).on("scroll", function() { 
    var sidebar = $('.sidebar'); 
    var stopPoint = $('#stop-point'); 
    var sidebarBottom = sidebar.offset().top + sidebar.height(); 
    var stopPointBottom = stopPoint.offset().top + stopPoint.height() - 30; 

    $('.sidebar').css({'top' : ($(this).scrollTop()/3)+"px"}); 

    if (($(this).scrollTop()/3) > 284) { 
     $('.sidebar').css({'top' : "284px"}); 
    } 
}); 

當滾動回頂部的sidebarBottom比stopPointBottom幾個像素是更大,所以該條件是不可能滿足。