jQueryリセット画面サイズに基づいてヘッダーのパディングを削除します。

Question

画面のサイズを変更すると、jQueryがリセットされないのはなぜですか？私はそれが768pxよりも大きくなるようにスケーリングしていても、ボディ上にパディングトップを保持しているようです。

jsを添付しておけば十分です。 HTMLとCSSが必要な場合は、私は助けになるためのフィドルを設定します。

(function ($) { 
    $(function() { 
    var headerHeight = $('.stickyHeader').innerHeight(); 

    $(window).resize(function() { 
     if ($(window).width() < 768) { 
     if ($('.stickyHeader')[0]){ 
     // do something for small screens 
     $('body').css(
      { 
      'padding-top': headerHeight + 'px' 
      } 
     ); 

     $(window).bind('resize', function() { 
      $('body').css(
      { 
       'padding-top': headerHeight + 'px' 
      } 
     ); 
     }); 
     $("body").offset({ top: 0, left: 0 }); 
     } 
} 


     else if ($(window).width() >= 768 && $(window).width() <= 992) { 
     // do something for medium screens 
     } 
     else if ($(window).width() > 992 && $(window).width() <= 1200) { 
     // do something for big screens 
     } 
     else { 
     // do something for huge screens 
     } 
    }); 
    }); 
})(window.jQuery); 

Answer 1

私はもう少し時間をかけて、他の画面サイズの追加機能を試してみました。これは私がそれが必要なもののために働くようです。私はそれが同様の状況で他人を助けることができることを願っている。

(function ($) { 
    $(function() { 
    var headerHeight = $('.stickyHeader').innerHeight(); 

    $(window).resize(function() { 
     if ($(window).width() < 768) { 
     if ($('.stickyHeader')[0]){ 
     // do something for small screens 
     $('body').css(
      { 
      'padding-top': headerHeight + 'px' 
      } 
     ); 

     $(window).bind('width', function() { 
      $('body').css(
      { 
       'padding-top': headerHeight + 'px' 
      } 
     ); 
     }); 
     $("body").offset({ top: 0, left: 0 }); 
     } 

} 


     else if ($(window).width() >= 768 && $(window).width() <= 992) { 
     // do something for medium screens 
     $('body').css(
      { 
      'padding-top': 0 
      } 
     ); 
     } 
     else if ($(window).width() > 992 && $(window).width() <= 1200) { 
     // do something for big screens 
     } 
     else { 
     // do something for huge screens 
     } 
    }); 
    }); 
})(window.jQuery); 

Answer 2

jqueryは必要ありません。css media queryで十分です。 http://www.w3schools.com/css/css_rwd_mediaqueries.asp

@media only screen and (min-width: 768px) { 
.header{ 
    padding:0; 
} 
}