当在文档末尾添加视口高度和窗口scrollTop位置时，jQuery $（document.body）.height（）不相同

Question

How is the document height is smaller than the window scroll top value + the viewport height, when I scrolled down to the end of document. Should not they be the same? I am struggling with this for last couple of hours but still not getting the hang of it.

$(function(){               
            vpw = parseFloat($(window).width());
            vph = parseFloat($(window).height());
            appearh = parseFloat(vph*0.4);
            dh  = $(document).height();
            footerh = $('#footer-area').height();
            footTop = dh - footerh;
            resizeDiv(vpw, vph, appearh);


            $(window).scroll(function(){
                scrollPos = $(window).scrollTop();
                jj = vph + scrollPos;
                console.log(scrollPos + '+' + vph + '=' + jj + ' is (at the bottom) ' + dh);
                if(scrollPos > appearh){
                    addWin = parseFloat(dh - vph);
                    $('#trends').removeClass('hidetrends',2000).addClass('showtrends',2000);
                    /*console.log( dh + '>' + scrollPos + ';' + addWin );
                    if(scrollPos >= 1672){
                        $('#trends').css('position', 'relative');
                    }else if(scrollPos <= 1672){
                        $('#trends').css('position', 'fixed');
                    }*/
                }else{
                    $('#trends').removeClass('showtrends',2000).addClass('hidetrends',2000);
                }

            });
        });
        window.onresize = function(event) {
            resizeDiv(vpw, vph, appearh);
        }
        function resizeDiv(vpw, vph, appearh) {
            $("#full-width").css({"height": vph + "px"});
        }

Answer 1

Try this:

$(window).scroll(function(){
     vpw = parseFloat($(window).width());
         vph = parseFloat($(window).height());
         appearh = parseFloat(vph*0.4);
         dh  = $(document).height();
         footerh = $('#footer-area').height();
         footTop = dh - footerh;
         resizeDiv(vpw, vph, appearh);
         scrollPos = $(window).scrollTop();
         jj = vph + scrollPos;
         console.log(scrollPos + '+' + vph + '=' + jj + ' is (at the bottom) ' + dh);
....

The reasoning behind this is I think it'd be wise to actually set your variables as you scroll