javascript - 在滚动效果 jQuery 上隐藏/显示标题

Question

我正在尝试实现这个 https://www.invisionapp.com/滚动效果上的标题，但无法使其工作。

我试过了

  jQuery(window).scroll(function () { 
    if (jQuery(this).scrollTop() < 200) {
      jQuery('header').hide();
    } else {
      jQuery('header').show();
    }
  });

但它不起作用。标题没有出现。我找到了一些可以实现这种效果的标题动画库，但我想通过简单的 jQuery 代码来实现它，不想使用库。

有人可以帮帮我吗？

Answer 1

为了使这种效果起作用，您的 header (如果是 w)必须修复

header {
    position: fixed;
}

或者您可以像这样将它添加到您的 jQuery 中

    jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() < 200) {
      $('header').css('position', 'absolute');
    } else {
      $('header').css('position', 'fixed');
      jQuery('header').show();
    }
  });

希望对你有帮助