在滾動效果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

為了使這種效果起作用，您的標頭（如果為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();
    }
  });

我希望這有幫助