jQuery Mobile：將標題隱藏向下滾動並向上滾動顯示

Question

我們在許多移動應用中看到的一個常見事情是用戶向下滾動頁面時頁眉消失，並且當頁面滾動頁面時頁眉出現。我們如何在jQuery Mobile中實現這一點？ （我正在回答我自己的問題）

Answer 1

/** 
* Header scroll control 
* When the user scrolls down the page hide the header, when they scroll up show it. 
*/ 
var lastScrollPosition; 

$(document).scroll(function() { 
    var scrollPosition = $(this).scrollTop(); 

    // Scrolling down 
    if (scrollPosition > lastScrollPosition){ 
    // If the header is currently showing 
    if (!$('[data-role=header].ui-fixed-hidden').length) { 
     $('[data-role=header]').toolbar('hide'); 
    } 
    } 

    // Scrolling up 
    else { 
    // If the header is currently hidden 
    if ($('[data-role=header].ui-fixed-hidden').length) { 
     $('[data-role=header]').toolbar('show'); 
    } 
    } 

    lastScrollPosition = scrollPosition; 
});