2012-01-24 8 views
4

divを最初のフォールドの下に "プッシュ"して、ユーザーがスクロールしない限りページロードに表示されないようにする方法はありますか? Jqueryビューポートと呼ばれるものがありますが、その使い方がわかりません。私はDIVがCSSで「隠されている」ことを望んでいません。最初の折りたたみの下でDIVを押しますか? Jquery?

$(function() { 
    $('#my-under-the-fold-element').css({ 
     top : $(window).height() 
    }); 
}); 

その後、あなたは自分の要素が絶対位置にする必要があります。viewportの高さと同じであるあなたの要素のためのtopまたはmargin-top CSSプロパティを設定するためにjQueryを使用することについてどのように

答えて

10

あなたが任意のJavaScriptを必要としません!ちょうど良いCSSです。 <body>の子要素をposition:absolute; top:100%;に設定すると、折り畳み要素の下に表示されます。

.below { 
    position: absolute; 
    top:100%; 
} 

プラス、javascriptで静的なトップまたはマージンを設定するのと異なり、ブラウザウィンドウのサイズを変更しても機能します。 absolute`要素は、文書の最後にそれをないプッシュします: `位置に100%`:私はトップ `ことを考えて、いくつかの理由で、http://jsfiddle.net/ubhBL/

+0

1:

はここで完全なマークアップでjsFiddleをですビューポートの一番下にあります。 – Jasper

+0

@shruggernautあなたは間違っています。 OPは「挿入」と似た単語を使用しません。この質問は、視覚的なビューポートに相対的な要素の位置付けについて明確に質問します - DOM内での位置変更ではありません。実際には、DOMが正しく挿入するためにページ折りたたみを超えて拡張されるという前提を立てることさえできませんでした。私が提供したソリューション(ほぼ4年前、心配しています)は、問題が解決するかどうか尋ねられました。「ユーザーがスクロールしない限り、ページの負荷に表示されないようにdivを最初のフォールドの下に「プッシュ」する方法はありますか? "コンテンツの長さやビューポートのサイズを知らなくてもそうします。 – rgthree

関連する問題