jQuery重置根据屏幕大小删除标题上的填充

当我调整屏幕大小时，为什么我的

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);

（函数（$）{
$（函数（）{
var headerHeight=$（'.stickyHeader'）.innerHeight（）；
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<768）{
如果（$（'.stickyHeader'）[0]）{
//为小屏幕做些什么
$（'body'）.css(
{
“填充顶部”：头部高度+“px”
}
);
$（窗口）.bind（'resize'，function（）{
$（'body'）.css(
{
“填充顶部”：头部高度+“px”
}
);
});
$（“body”）.offset（{top:0，left:0}）；
}
}
如果（$（window）.width（）>=768&&$（window）.width（）992&&$（window）.width（）好的，我又花了几分钟，尝试探索其他屏幕尺寸的其他内容。这似乎符合我的需要。我希望它能帮助其他类似情况的人

(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);

（函数（$）{
$（函数（）{
var headerHeight=$（'.stickyHeader'）.innerHeight（）；
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<768）{
如果（$（'.stickyHeader'）[0]）{
//为小屏幕做些什么
$（'body'）.css(
{
“填充顶部”：头部高度+“px”
}
);
$（窗口）.bind（'width'，function（）{
$（'body'）.css(
{
“填充顶部”：头部高度+“px”
}
);
});
$（“body”）.offset（{top:0，left:0}）；
}
}
否则，如果（$（window）.width（）>=768&&$（window）.width（）992&&$（window）.width（）则不需要jquery。
css媒体查询对您来说已经足够了。

jQuery.bind（）
在3.0中被弃用。您应该使用
.on（）
。你检查过事件是否触发了吗？你有什么原因不能使用CSS媒体查询吗？你能把JSFIDLE放在这里吗？今晚我将在这里使用一个代码笔。我需要完成一些事情。我的回答中发现的一些问题是，它只在调整大小时触发jQuery。我需要以某种方式将调整大小与页面加载结合起来，因此如果页面加载到移动设备中，它会立即将填充添加到正文中，不需要调整大小。页眉是内容管理的，并且不会一直保持相同的大小。我需要jQuery来找到它的高度。问题是，当我将浏览器调整为移动时，它工作正常，但当我再次将其变大时，它从未启动javascript以获得t他身高不高。
@media only screen and (min-width: 768px) {
 .header{
   padding:0;
 }
}