jQuery Mobile:使标题在向下滚动时隐藏并在向上滚动时显示 [英] jQuery Mobile: Make the header hide on scroll down and show on scroll up

问题描述

我们在许多移动应用中看到的常见现象是，当用户向下滚动页面时，标题消失，而当用户向上滚动页面时，标题出现.我们如何在jQuery Mobile中实现这一目标? (我在下面回答我自己的问题)

A common thing we see in many mobile apps is when the user scrolls down the page the header disappears and when they scroll up the page the header appears. How do we achieve this in jQuery Mobile? (I'm answering my own question below)

推荐答案

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

这篇关于jQuery Mobile:使标题在向下滚动时隐藏并在向上滚动时显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！