當div高度小於窗口時，我該如何將類添加到body中？

Question

如果某個div高度小於用戶窗口大小，我正在嘗試向該主體添加一個類。這是我目前的jQuery腳本。它工作不好，我不會有任何錯誤。不知道我做錯了什麼。

感謝

jQuery(document).ready(function($) { 
    var $window = $(window); 
    var $pageHeight = $('.wrap').height(); 
    function checkWidth() { 
     var windowsize = $window.height(); 
     if (windowsize < $pageHeight) { 
      $('body').addClass('need-padding'); 
     } 
    } 
    checkWidth(); 
    $(window).resize(checkWidth); 
}); 

Answer 1

嘗試......沒必要創建單獨的功能：只要我能看到你

$(window).resize(function(){ 
    var $windowHeight = $(window).height(); 
    var $blockHeight = $('.wrap').height(); 
     if ($blockHeight < $windowHeight) { 
      //console.log($windowHeight+" Window Height"); 
      //console.log($blockHeight+" Block Height"); 
      $('body').addClass('need-padding'); 
     } 
    }); 

Answer 2

一般來說，代碼看起來OK。但是，如果您的$('.wrap')有邊距或邊框，則可能需要使用使用.outerHeight()而不是.height()。

Answer 3

這裏有一個小提琴，顯示是怎麼回事：

http://jsfiddle.net/4fqb8t1q/

$(document).ready(function() { 
    checkWidth(); 
    $(window).resize(checkWidth); 
}); 
function checkWidth() { 
    var $pageHeight = $('.wrap').height(); 
    alert($(window).height() + " < " + $pageHeight); 
    if ($(window).height() < $pageHeight) { 
     $('body').addClass('need-padding'); 
    } 
}