3

ユーザーが 600px スクロールするまで、ページにヘッダーを表示しないようにしています。jquery docs を解析して以下のコードを思いつきましたが、うまくいかないようです。正しい方向に少し助けていただければ幸いです。ありがとう！

更新：私はそれを理解しました。クラス名の前にセレクターピリオドがありました。ただし、期間遷移の火は見られません。$("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; }

Jクエリ

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

3 に答える 3

3

ユーザーが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

あなたが間違っていることの1つremoveClass()は、遷移引数がないことです。クラス引数のみ.

于 2012-12-27T20:04:02.667 に答える
1

クラスを追加するだけなら、「.」を指定する必要はありません。（ドット）。

<script>
  $(window).scroll(function () { 
    if ($(this).scrollTop() < 600) {
      $(this).addClass("header-hidden");
    }
  });
</script>
于 2012-12-27T20:02:37.390 に答える
0

これは、質問の 2 番目の部分に対する回答です。

「しかし、期間遷移の発火は見られません。$("header").removeClass("header-hidden", 1000); 何かアドバイスはありますか?」

jQuery api を確認しましたが、removeClass が遷移オプションを使用できるようには見えません。

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

ヘッダーをアニメーションとしてフェードインし、アニメーションとしてフェードアウトする場合は、jQuery アニメーション関数を使用する必要があります。例えば

$("ヘッダー").fadeIn(1000);

$("ヘッダー").fadeOut(1000);

適用できるすべての jQuery の「効果」へのリンクは次のとおりです。

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

それが役立つことを願っています!

于 2012-12-27T20:21:31.307 に答える