jquery-mobile - jQuery 移动 : Make the header hide on scroll down and show on scroll up

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