0

ページの上部に絶対に配置されるように開始するメニューを作成しようとしています。ウィンドウが特定のポイントより下にスクロールすると、メニューは上部の固定位置にジャンプし、jQuery を使用してスライドダウン効果を作成します。ウィンドウがこのポイントよりも上にスクロールされると、メニューが上にスライドし、ページの上部にある元の位置に戻ります。

残念ながら、スライドを下げることはできますが、スライドを上げることはできません。スライドが消えて、一番上に戻りません。これは、slideDown() 関数がインライン スタイルを設定していることが原因であることがわかっていますが、display: none;これをリセットして css を使用してブロックする!importantことも、jQuery 作業を使用することもありません。[ここ] [http://codepen.io/SawyerK/pen/HrgDE] は私が部分的に使っているペンです。これを修正する方法についてのアイデアはありますか?

私のjQueryコード:

$(document).ready(function() {
  var header = $("header");

  $(window).scroll(function() {
    if ($(window).scrollTop() > $(window).height()) {
      header.addClass("fixed").slideDown();
    } else {
      header.slideUp().removeClass("fixed");
    }
  });  
});

そして、固定クラスはposition: fixed; display: none;、slideDown 関数が機能するように設定するだけです。何か案は？

4

1 に答える 1

0

slideUp完了するまで待つ必要があります。

$(window).scroll(function() {
  if ($(window).scrollTop() > $(window).height()) {
    header.addClass("fixed").slideDown();
  } else {
    header.slideUp(400, function() {
      header.removeClass( "fixed" );
    });
  }
});
于 2013-09-19T07:28:33.380 に答える