当div高度小于window时，如何向正文添加类？

Question

I'm trying to add a class to the body if a certain divs height is smaller than the users window size. Here is my current jQuery script. It doesn't work very well, and I don't get any errors. Not sure what I'm doing wrong.

Thanks

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

Try this... no need to create separate function :

 $(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

Generally, the code looks ok. But if your $('.wrap') has margins or borders, you might want to use use .outerHeight() instead of .height() .

Answer 3

Here's a fiddle that shows what's going on:

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