jQuery offset() top是浏览器不兼容吗?

前端之家收集整理的这篇文章主要介绍了jQuery offset() top是浏览器不兼容吗?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图在一些其他元素下定位一个元素,但是我在一个问题中遇到了一个问题,当页面被向下滚动时,offset()返回不同的IE和其他浏览器的值。

IE返回相对于可见区域顶部的位置(即在向下滚动时下降),Firefox和Chrome始终返回相同的值,无论滚动(我认为是更好的行为)。

只是为了澄清:如果没有一个元素的父母相对定位,那么offset()和position())返回不同的IE值,这取决于你向下滚动的距离,但是这并不是在jQuery中提到的文件。为什么?有没有办法,这不需要任何更改的HTML结构(例如,我想重复使用一个datepicker为许多字段,只是重新定位它)。

有没有人遇到同样的问题?

解决方法

查看这个我的 fiddle,通过拖动红色的div来测试。

HTML

<div id="hook"></div>
<div id="hanger"></div>

CSS

#hook {
    width: 200px;
    height: 50px;
    background-color:red;
    position: absolute;
    cursor: move;
}
#hanger {
    width: 200px;
    height: 50px;
    background-color:purple;
    position: absolute;
}

Javascript

$('document').ready(function(){
    var top = $('#hook').offset().top + $('#hook').height()+20;
    var left = $('#hook').offset().left;

    $('#hanger').css('top',top);
    $('#hanger').css('left',left);

    $('#hook').draggable({
        start: function(){
            $('#hanger').toggle();
        },stop: function(){
                var top = $('#hook').offset().top + $('#hook').height()+20;
                var left = $('#hook').offset().left;

                $('#hanger').css('top',top);
                $('#hanger').css('left',left);

                $('#hanger').toggle();
        }
        });
});

猜你在找的jQuery相关文章