【问题标题】:Get actual height of document with jQuery使用 jQuery 获取文档的实际高度
【发布时间】:2016-07-11 10:39:46
【问题描述】:

我的 jQuery 插件有问题,我想在页面结束前以特定方式显示页脚。为此,我得到实际的底部位置并将其与整个身体的高度进行比较。

但是有一个问题是 jQuery 函数 height() 返回错误值。例如,我知道该站点的高度为 5515px,但函数返回给我一个值:8142px

我在页面的几个地方使用了插件mCustomScrollbar,我认为它可能会导致问题。我无法禁用它,因为页面包含需要它看起来不错的元素。

我的代码:

(function($){
    $.fn.scrollingElements = function(){
        var height = $(window).height();
        var max_height = $(document).height();
        var prev_top = $(window).scrollTop();
        var prev_bottom = top + height;
        $(window).scroll(function(){
            var top = $(window).scrollTop();
            var bottom = top + height;

            console.log(max_height, bottom);

            if(prev_top < height && top > height){
                // console.log('show header', 'show sticky', 'show footer small');
            }
            if(prev_top > height && top < height){
                // console.log('hide header', 'hide sticky', 'hide footer');
            }
            if(prev_top < 2*height && top > 2*height){
                // console.log('show sroll top');
            }
            if(prev_top > 2*height && top < 2*height){
                // console.log('hide scroll top');
            }

            if(prev_bottom < max_height - 100 && bottom > max_height - 100){
                // console.log('show footer large');
            }
            if(prev_bottom > max_height - 100 && bottom < max_height - 100){
                // console.log('show footer small');
            }

            prev_top = top;
            prev_bottom = bottom;

        });
        $(window).resize(function(){
            height = $(window).height();
        });
    }
})(jQuery);

回答汤米·里奥丹: 将 $(document).height() 更改为 document.body.clientHeight 仍然无效,但结果仍然很糟糕。尝试使用 $('body').height() 效果相同。

【问题讨论】:

  • 为什么不在 CSS 中使用 position: fixed; bottom: 0 来做到这一点?
  • 手动减去结果高度...
  • Rory,不,我不能。Bhojendra,你是什么意思?该页面具有动态高度,我无法手动将其放在那里。
  • 请尝试获得身高,这可能对您有用。

标签: javascript jquery html


【解决方案1】:

请使用

文档

而不是窗口 例如:

$(window).resize(function(){ 高度 = $(文档).height(); });

【讨论】:

    猜你喜欢
    • 2011-06-14
    • 1970-01-01
    • 1970-01-01
    • 2012-12-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-13
    • 1970-01-01
    相关资源
    最近更新 更多