0

私はうまく機能するこのjqueryコードを持っています:

$(document).scroll(function(){
    if ($(this).scrollTop()>175){
        // animate fixed div to small size:
        $('header').stop().animate({ height: 90 },100);
    } else {
        //  animate fixed div to original size
        $('header').stop().animate({ height: 175 },100);
    }
});

上記を常にすべてのブラウザ/デバイスで表示して読み取る必要がありますが、小さいヘッダーの高さを調整する必要もあります (現在 90px - 行の下 // 固定 div を小さいサイズにアニメーション化:) ブラウザの幅のみ641px から 959px の間。これらのブラウザの幅に対してのみ、ヘッダーの高さを 120px にする必要があります。それ以外の場合は、上記のコードを使用します。

ブラウザのサイズが変更されたときにそれ自体を更新したいメディアクエリに少し似ています。

これを正確に行うにはどうすればよいですか？

4

1 に答える 1

6 
$(window).width();

あなたが探しているものです。と、

$(window).on("resize",function(){  
   if($(window).width()>641 && $(window).width()<959){
          // do the animations
   }    
}

が主な考え方です。

于 2012-08-29T12:50:58.423 に答える