0

如何让 div 元素和浏览器 bootom 的距离自动更新？

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

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

jsFiddle

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

4

1 回答 1

3

将代码包装在 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");
    });

});
于 2012-10-17T19:31:49.600 回答