0

だから私は少し検索をしていて、これからも調べていきますが、SOコミュニティに質問を出す時が来たと思いました。

私は、高さが可変の固定ヘッダーを含む小さなプロジェクトに取り組んでいます。基本的な構造は次のとおりです。

<header>
  //any amount of elements
  //meaning this will have varying heights
  //I'll also be able to "open" and "close" this header
  //using slideUp and slideDown (because the end height varies I don't want to use animate)
</header>
<section>
  //body content
</section>

通常のヘッダー（つまり、CSS以外の位置）としては、これで問題ありません。これは、htmlフローの通常のコンテキストにあり、その下のコンテンツと相互作用します。ヘッダーが下のセクションを下にスライドすると、ヘッダーも下にスライドします。もちろん、ヘッダーが上にスライドすると、逆のことが起こります。これは次のように機能しますhttp://jsfiddle.net/byazaki/7FcJF/

これで、ヘッダーの位置が固定されている場合、その下のセクションは上下に移動しても影響を受けないため、代わりに「header-spacer」要素が導入されます。

<header>
  //any amount of elements
</header>
<header spacer>
  //in theory this would resize with the 
  //header as it slides up and down to mimic
  //its effect on the other elements in the flow.
</header spacer>
<section>
  //body content
</section>

これはかなり単純に聞こえますよね？通常はそうです。ヘッダーを開いたときの大きさと、閉じたときのヘッダーの大きさを知っていれば、そうです。簡単にするために、閉じているときは0とだけ言うので、開いているときは心配する必要があります。

長いイントロで申し訳ありませんが、これは私の最初のポイントに戻ります。ヘッダーのターゲットの「高さ」がわからない場合、スペーサーをアニメーション化するにはどうすればよいですか？.slideDownを実行しても機能しません。

私が考えた解決策の1つは、次のようなことを行うことでした。

function setSpacer() = { spacer.css('height', header.height())};
var interval = setInterval(setSpacer, 10);
header.slideDown(500, function(){
  clearInterval(interval);
});

構文エラーなどで画像をペイントしようとしている場合は申し訳ありません...基本的には、スペーサーの高さを10ミリ秒ごとにヘッダーの高さに設定し始め、ヘッダーのアニメーションが終了すると間隔がクリアされます。

私はまだこれを実装していません。なぜなら、私の問題に対するより洗練された解決策があるのか​​、あるいは私が知らないjQueryアニメーションブランチで何かすることがあるのか​​興味があったからです。

注：もう1つの考えは、slideUp（）/ slideDown（）/ animate（）クラスを拡張して、1つ以上のhtml要素を含み、ターゲットオブジェクトのアニメーションをミラーリングする引数を取るプラグインを作成することです。

どんな考えやフィードバックも大歓迎です、ありがとう：D

4

1 に答える 1

1

何が欲しいのか少しわかりません。

.slideDown()/.slideUp()はコンテンツの表示と非表示に使用され、高さの設定の間にありません。自分の身長を決めたい場合は、.animate()代わりに使用することをお勧めします。

これが私が質問を解釈した方法です

メインヘッダーにaを付け、position: fixed別のヘッダーを作成しました<header id="spacer"></header>。最初に、メインヘッダーのデフォルトの高さを登録し、スペーサーに同じ高さを指定します。次に、一時的にクラスを追加しますfull_height。これは基本的には単なるaheight: autoであり、そのクラスがある場合は高さを登録します。そこから物事は単純でなければなりません。両方の要素でslideDownまたはslideUpを使用するか、両方の要素で.animate（）を使用して、デフォルト/フルハイトを混乱させます。

そうは言っても、slideDown/slideUpと.animateの両方を使用した例を次に示します。

.slideDown()/.slideUp()

例| コード

//The full_height class is just a "height: auto"
var defaultHeight = $("#header").outerHeight(),
    entireHeight = $("#header").addClass("full_height").outerHeight();

$("#header").removeClass("full_height");
$("#spacer").height(defaultHeight);

$('#button').click(function() {
    if ($('#header').hasClass('hidden')){
      $('#header, #spacer').slideDown().removeClass('hidden');
    } else {
      $('#header, #spacer').slideUp().addClass('hidden');
    }
});

.animate()

例| コード

//The full_height class is just a "height: auto"
var defaultHeight = $("#header").outerHeight(),
    entireHeight = $("#header").addClass("full_height").outerHeight();

$("#header").removeClass("full_height");
$("#spacer").height(defaultHeight);

$('#button').click(function() {
    if ($('#header').hasClass('hidden')){
        $('#header, #spacer').animate({
            height: defaultHeight //either use default height or entire height
        }, 500).removeClass('hidden').show();
    } else {
        $('#header, #spacer').animate({
            height: 0, //either use default height or 0
        }, 500, function(){
            $(this).hide(); //hide if you're going to use 0
        }).addClass('hidden');
    }
});
于 2012-04-04T15:36:21.937 に答える