Question

如何使div元素与浏览器bootom的距离更新？

这是我的部分代码，用于计算从元素到窗口底部的距离。尽管用户滚动时值不会更新，但它工作正常。让我们假设有几个块，我需要知道其中任何一个是否接近窗口边缘。正如我之前提到的，这计算了onload的距离，但如果用户滚动页面，我需要它来更新值。有什么想法吗？

var the_height = $(window).height(); // viewport height
var activeimage = $(this);  // div element
distanceBottom = the_height - activeimage.offset().top + activeimage.height();

jsFiddle

现在，由于小提琴也在这里，我对距离值的需求是因为我想确保工具提示在可见区域内。我最初的想法是，如果拇指真的靠近边缘，则将工具提示位置放在拇指上方。那就是需要距离的地方

Answer 1

将您的代码包装在window.scroll事件中，每次滚动文档时都会调用它。如果将它放在文档onload事件中，则会调用一次，因此在此之后不会更新。

$(window).scroll(function () { 
    var the_height = $(window).height(); // viewport height
    var activeimage = $(this);  // div element
    distanceBottom = the_height - activeimage.offset().top + activeimage.height();
});

<强>更新

不确定，如果我正确理解您的要求。评论函数定义是否有帮助？我也没有看到distanceBottom变量的任何用法。

$(document).ready(function () {


    $('div.thumbnail-item').mouseenter(function(e) {

        contents = $(this).find('.tooltip').find('.invisible').html();
        tooltip = $(this).find('.tooltip').find('img');
        wholetooltip = $(this).find('.tooltip');
        var activeimage = $(this);  // div element

        tooltip.attr('src', contents);
        //$(window).scroll(function () { 
        var the_height = $(window).height(); // viewport height
        distanceBottom = the_height - activeimage.offset().top + activeimage.height();
        //});


        if (tooltip[0].complete) { // if image already loaded
            tooltipWidth = wholetooltip.width();
            tooltipHeight = wholetooltip.height();

            imgwidth = activeimage.width();
            imgheight = activeimage.height();

            test = 0 - tooltipHeight + imgheight; // will position nice without gray border


            activeimage.css('z-index','999')
        .children("div.tooltip")
        .css({'top': test,'left': imgwidth + 30,'display':'block'});



        } else { // if image not loaded
        tooltip.load(function() {

            imgwidth = activeimage.width();
            imgheight = activeimage.height();
            test = activeimage.offset().top - activeimage.offset().top - imgheight;

            activeimage.css('z-index','999')
        .children("div.tooltip")
        .css({'top': test,'left': imgwidth + 30,'display':'block'});



            tooltip.css({
            'border-color': 'red',
            'border-width': '5px'
            });
        });
        }



    }).mouseleave(function() {

        // Reset the z-index and hide the image tooltip 
        $(this).css('z-index','10')
        .children("div.tooltip")
        .animate({"opacity": "hide"}, "fast");
    });

});

滚动时更新元素和窗口之间的距离

1 个答案: