如何计算2个元素之间的距离，像这样？

Question

如何计算2个元素之间的距离，像这样？

我想计算id="element_bottom"和id="ref_box"

之间的距离

这是计算mouse和id="element_bottom"

之间距离的小提琴

如何应用此代码计算id="element_bottom"和id="ref_box"之间的距离？

三江源

http://jsfiddle.net/t5Kts/808/

(function() {

    var mY, distance_bottom,
        $distance_bottom = $('#distance_bottom span'),
        $element_bottom  = $('#element_bottom');            

    function calculatedistance_bottom(elem , mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
    }

    $(document).mousemove(function(e) {        
        mY = e.pageY;
        distance_bottom = calculatedistance_bottom($element_bottom , mY);
        $distance_bottom.text(distance_bottom);         
    });
})();

Answer 1

这样的事可能应该这样做：

$('.foo').offset().top - $('.bar').offset().top

Answer 2

假设你的距离参考是每个元素的顶部，你可以试试这个：

DEMO

(function() {
    var btm = $('#element_bottom'),
        ref = $('#ref_box'),
        refTop = ref.position().top;


    $(window).scroll(function(){
       var btmTop = btm.position().top;
        $('#distance_bottom span').text(Math.abs(refTop-btmTop));

    });    

})();