javascript - jquery 每次重新加载时返回不同的高度

Question

我正在尝试在 jQuery 中创建一个类似灯箱的东西。为了垂直对齐我的灯箱，我使用的是 jQuery。这是我的插件代码:

(function($){
    $.fn.lightbox = function(){
        return this.each(function(){

            /*plugin code starts here*/

            var self = this;
            console.log(self);

            /*
            * Now we will vertically align the lightbox
            * To do that we will calculate the body's height,lightboxes height
            * and then subtract later from earlier one.This will give us the total empty space
            * So the margin from the top of lightbox will be half of the result we got from subtraction
            */
            //calculating body's height
            var doc_body_height = $('body').height();
            var lightbox_height = $(self).height();
            var margin_top = (doc_body_height - lightbox_height)/2;
            $(self).css('margin-top',margin_top);
            console.log($(self).height());
            /*plugin code ends here*/

        });
    }
})(jQuery);

但问题是，我得到的高度不是 18 就是 300。 300是div#lightbox的实际高度，我不知道为什么同一个函数会随机返回不同的高度。

见图片:

很明显 div#lightbox 的高度不是 18px。

Answer 1

您正在使用 $('body').height() 计算高度。这是 body 元素高度的计算值。这意味着对于只有一个 50 像素高的可见元素的页面，正文将返回 50 像素。相反，需要大量滚动的长页面将返回整个主体高度，而不仅仅是视口(viewport)中可见的部分。

您需要在计算中使用 $(window).height();。