Question

我写了一个小功能，在浏览器窗口左侧和（居中）导航菜单之间放置一个徽标。菜单项从数据库填充，第一个项目为id item0。

function positionLogo(){
    var $menuleft=0;
    var $element=document.getElementById('item0');
    if ($element.offsetParent) {
        do {
            $menuleft+=$element.offsetLeft;
        } while ($element=$element.offsetParent);
    }
    var $logoleft=($menuleft/2)-130; // As logo is 260px wide
    if ($logoleft<0) {
        $logoleft=0;
    }
    $('#logo').css('left',$logoleft);
}

$(document).ready(function(){
    positionLogo();
});

$(window).resize(function(){
    positionLogo();
});

这个窗口调整大小时工作正常，但是当页面加载时它首次运行时，它设置的位置大约是20px太右（即$ logoleft比它应该多20个）。一旦页面调整大小，它就会跳转到正确的位置。

目前还没有在任何地方生活，但有没有人有任何想法？谢谢！

Answer 1

您是否尝试过处理window.onload？这将在页面完全加载时触发，而不是在DOM准备就绪时触发（如$(document).ready）

Answer 2

替换它：

$(document).ready(function(){
    positionLogo();
});

$(window).resize(function(){
    positionLogo();
});

有了这个：

$(window).bind('load resize', positionLogo);

您需要完成布局和所有尺寸（图片加载等），因此您需要使用window.load方法而不是document.ready。将其与bind()结合使用空格分隔事件，您可以将其归入一个简单的单行处理程序。另外一点，不需要在function() { }中只包含一个函数，只需输入我上面的函数名称：）

Answer 3

我无法重复这种现象。 IE中有一些与offsetParent有关的错误，可能与它有关，具体取决于你如何定位元素。您可以在jQuery中使用offset方法来解决浏览器不兼容问题。

出于某种原因，即使在Firefox中，如果没有指定left样式的单位，它似乎也可以工作，但它确实应该有一个。

function positionLogo(){
   var menuleft = $('#item0').offset().left;
   var logoleft = Math.max(0, (menuleft / 2) - 130); // As logo is 260px wide
   $('#logo').css('left', logoleft + 'px');
}

或简单地说：

function positionLogo(){
   $('#logo').css('left', Math.max(0, ($('#item0').offset().left / 2) - 130) + 'px');
}

Answer 4

如果调整窗口大小正常，那么您可能应该尝试使用resize触发该函数：

所以替换：

$(document).ready(function(){
    positionLogo();
});

使用：

$(document).ready(function(){
    $(window).resize();
});

JQuery函数没有按预期工作

4 个答案: