jquery - jQueryで要素の高さを計算する

Question

画面の高さに基づいて要素に高さを割り当てる必要があります。画面の折り目を超えるコンテンツがあり、使用できません

$(window).height();

開いているウィンドウの表示部分の高さを計算する方法はありますか?

score 3 · Accepted Answer

それを行う別の方法は次のようになります。

var height = window.innerHeight || document.documentElement.clientHeight || getElementsByTagName('body')[0].clientHeight;

これは、ブラウザのサポートに基づいてフォールバックします

score 2 · Accepted Answer

これにより、ドキュメントまたはウィンドウの高さの違いが表示されます。

score 2 · Accepted Answer

offetTop要素の表示可能な高さを取得するには、ウィンドウのから要素のを引きheightます。

var elTop = $("#element").offset().top;
var winHeight = $(window).height();
var elVisibleHeight = winHeight - elTop;

その場合elVisibleHeight < 0、要素はスクリーンフォールドの下にあり、表示されません。要素の位置を追跡する必要がある場合は、 window でこれを更新する必要がありますscroll。

アップデート

理論の実例を使ってフィドルを作成しました。明らかに、これを短くすることができます。何が起こっているのかがより明確になるように、かなり冗長なままにしています。

3 に答える 3