jQuery：ウィンドウのサイズが変更されても常にウィンドウをカバーするので、要素の追加と削除

Question

Webサイトのベースラインを作成して、ページの下部に常にベースラインを表示します。

私がしていることは、CSSを使用してスタイリングされた1つの初期ベースラインを作成することです。

次に、ドキュメントの下部に到達するまで新しいものを作成してください。

<script type="text/javascript"> 
     $(document).ready(function() { 
      var diff = Math.floor($('body').height()/$('.base-line').height()); 
      for (var i = 1; i <= diff; i++) 
       $('#lines').append("<div class='base-line bl" + i + "'></div>"); 
     }); 
    </script> 

ただし、ページのサイズを変更すると（高さを低くするなど）、ベースラインが残っています。また、ドキュメントの高さを動的に増加させると（たとえば、メディアクエリで値を変更するなど）、ベースラインはページの最下部に到達しません。

リサイズ時にベースラインを追加および削除するリサイズハンドラを右クリックすることはできますか？私は、各サイズ変更ですべてのbase-lineを削除し、各サイズ変更状態ごとにすべてを描画すると、それはむしろ性能が悪いと思います。

これに関するアイデアはありますか？

Answer 1

を（私は最初のだろう）を追加/削除する場合はわからないが作成する関数ですベースライン

function addBaseLines(){ 
    $('#lines').clear(); 
    var diff = Math.floor($('body').height()/$('.base-line').height()); 
    for (var i = 1; i <= diff; i++){ 
     append("<div class='base-line bl" + i + "'></div>"); 
    } 
} 

あなたはこの

を行うことができますパフォーマンスを向上させるためにJSFiddle

あなたがタイムアウトを使用する場合、パフォーマンスはひどいではありませんで

var timeout = null; 

$(window).resize(function(){ 
    if (timeout!=null){ 
     clearTimeout(timeout); 
    } 
    timeout = setTimeout(addBaseLines, 1000); // only do when the user is "done" 

}); 

見る

、ちょうど視界の外のものを削除しますが、私はそれをすることによって

Answer 2

だけでなく、あなたはできる、

$(window).resize(function(){ 
    var height = $(window).height(); /*or width*/ 
    var min = 500; //for example 
    if(height < min){ 
     $('.base-line').hide(); 
    }else{ 
     $('.base-line').show(); 
    } 
}); 

が、私はあなたが表示/非表示や、これを仮定し