高さに基づいてdivの上マージンを動的に変更する - jquery

私のWebページの横に固定されているdivがあります。そのdivを垂直方向の中央に配置する必要があります。 CSSを使用することで簡単に達成できます。

#sidePanel { margin: -150px 0 0 0; top: 50%; position: fixed;}

私が抱えている問題は、このsidePanel divが抱えていることです私のサイトのナビゲーションナビゲーションが開いて子要素が表示されると、高さが増して中央揃えになります。 sidePanel divの高さを再計算し、divを中央揃えにするために適切な負のマージンを適用するためのjQueryが必要です。これが私が遊んでいたjQueryです。

$("#sidePanel").css("margin-top", $(this).outerHeight());

私は負のマージンを高さの半分に設定するための計算には取り組んでいませんが、これは私が探している高さの値を与えているわけではありません。

回答：

this 参照していません #sidePanel この場合、elementは、に渡された関数でそれを作る必要がある .css() このような：

$("#sidePanel").css("margin-top", function() { return $(this).outerHeight() });

または .each() コール、このように：

$("#sidePanel").each(function() {
$(this).css("margin-top", $(this).outerHeight());
});

あるいは、セレクタをキャッシュしてください。

var sp = $("#sidePanel");
sp.css("margin-top", sp.outerHeight());

マージンをウィンドウの高さからdivの高さを引いたものをすべて2で割った値に設定してください。それはそれを垂直に中央に置くべきです。