用jquery隱藏滾動標題

Question

我試圖讓我的頁面不顯示標題，直到用戶滾動600px。 我通過解析jquery文檔來提出下面的代碼，但我似乎無法使其工作。 對正確方向的一點幫助將非常感激。 謝謝！

更新：我已經明白了。 我在課程名稱之前有選擇器時段。 雖然我沒有看到持續時間的轉變。 $（“header”）。removeClass（“header-hidden”， 1000 ）; 有什么建議嗎？

HTML

 <header class="header-fixed header-hidden shadow">
<section>
  <nav>
    <ul>
      <li>one</li>
          <li>two</li>
        </ul>
  </nav>
</section>
 </header>

CSS

.header-fixed { position: fixed; top: 0; left: 0; width: 100%; }
.header-hidden { display: none;  }
header { z-index: 999; margin: 0; overflow: hidden; height: 70px; background: rgba(255, 255, 255, 0.9); position: relative; }

jQuery的

    <script>
      $(window).scroll(function () { 
        if ($(this).scrollTop() < 600) {
          $("header").removeClass("header-hidden", 1000);
        }
                else
                  $("header").addClass("header-hidden", 1000);
      });
    </script>

Answer 1

如果您打算隱藏標題，直到用戶點擊600px。 我會建議改變你的CSS，使頭默認為隱藏，然后只是做一個簡單的jQuery .show()和.hide()在需要時

CSS：

header { 
  background: #ccc; 
  display: none;
  height: 70px; 
  left: 0; 
  margin: 0; 
  overflow: hidden; 
  position: fixed; 
  top: 0; 
  width: 100%;
  z-index: 999; 
}

jQuery的：

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

的jsfiddle

你有一件事是removeClass()沒有過渡參數。 只有沒有的類參數.

Answer 2

只是要添加該類，您不必指定“。” （點）。

<script>
  $(window).scroll(function () { 
    if ($(this).scrollTop() < 600) {
      $(this).addClass("header-hidden");
    }
  });
</script>

Answer 3

這是對問題第二部分的回答：

“雖然我沒有看到持續時間的過渡。$（”標題“）。removeClass（”header-hidden“，1000）;有什么建議嗎？”

我檢查了jQuery api，它看起來不像removeClass可以采取轉換選項。

http://api.jquery.com/removeClass/

如果您希望Header作為動畫淡入淡出並作為動畫淡出，您將要使用jQuery動畫功能。 例如

$（ “頭”）淡入（1000）。

$（ “頭”）淡出（1000）。

您可以應用所有jQuery“效果”的鏈接：

http://api.jquery.com/category/effects/

希望有所幫助！