jQuery的航點 - 要扭轉功能

Question

我使用jQuery航點，當你到達div.main-content區我的網站，像這樣來調用「返回頂部」按鈕：

$('div.page.event div.main-content').waypoint(function() { 
    $('button.scrollToTop').fadeIn(200); 
}); 

但我想不出如何將其反轉，以便當您回到header.main-header時，按鈕消失。我試過這個：

$('div.page.event header.main-header').waypoint(function() { 
    $('button.scrollToTop').fadeOut(200); 
}); 

但這並不奏效。我相信這太簡單了，我只是沒有理解這一點。有人可以幫忙嗎？

Answer 1

您可以使用傳遞給航點功能的direction參數。其值將根據用戶在穿越航點時滾動的方向而爲「下」或「上」：

$('div.page.event div.main-content').waypoint(function(direction) { 
    if (direction === 'down') { 
    $('button.scrollToTop').fadeIn(200); 
    } 
    else { 
    $('button.scrollToTop').fadeOut(200); 
    } 
});