jQuery重置基於屏幕大小刪除標題上的填充

爲什麼我的jQuery在我調整屏幕大小時無法重置。它似乎保持身體上的填充頂部，即使我縮放比768px更大。jQuery重置基於屏幕大小刪除標題上的填充

我附上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);

來源

2017-02-09 user2025730

'jQuery.bind（）'在3.0棄用。你應該使用'.on（）'。你有沒有檢查事件是否發生？有沒有理由不能使用CSS媒體查詢？ – Sami

你可以把jsfiddle放在這裏嗎？ –

今晚我會在這裏工作。我需要完成一些事情。我在回答中發現的一些問題是，它僅在調整大小時觸發jQuery。我需要以某種方式將調整大小和頁面加載結合起來，因此如果頁面加載到移動設備中，它會立即將填充添加到主體，並且不需要調整大小。 – user2025730

好吧，我花了幾分鐘時間嘗試探索其他屏幕尺寸的其他東西。這似乎適用於我需要它做的事情。我希望它可以幫助其他人處理類似的情況。

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

來源

2017-02-09 18:04:59 user2025730

你不需要jquery。 css媒體查詢就足夠了。 http://www.w3schools.com/css/css_rwd_mediaqueries.asp

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

來源

2017-02-09 20:12:50

標題是內容管理的，並且不會一直是相同的大小。我需要jQuery來找到它的高度。這個問題是，當我調整瀏覽器的移動它的工作，但是當我再次變大時，它從來沒有解僱JavaScript來獲取innerHeight。 – user2025730

jQuery重置基於屏幕大小刪除標題上的填充

回答

相關問題