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媒体查询就足够了。 http://www.w3schools.com/css/css_rwd_mediaqueries.asp

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

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

2 个答案: