javascript - Jquery事件捕获margin-left的变化

Question

我这里有一个情况，我有一个 div 是 margin: auto 让它居中。

这工作得很好，但是当我调整窗口大小时，我希望它在达到一定的左边距时停止居中。

想法是我在左侧有一个 float 对象，并且我不希望它重叠。

有人建议吗？

谢谢

编辑:添加代码

<nav id="servicos_nav">
    <div id="full">
        ...
    </div>
    <div id="minimized">
        ...
    </div>
</nav>
<section id="content">
… PHP generated code …
</section>

导航是绝对定位的，因为它是一些效果，通过完整的动画将变化最小化。

部分内容宽度为 860 像素，边距为自动。但是导航中有一个元素的宽度始终为 140px，我不希望最小化窗口导致内容与该元素重叠。

SolutionEdit:我基于 awnser 的解决方案(静态宽度更容易:-)):

window.onresize = function(event) {
        if(window.innerWidth <= 1142)
        {
            $("#content").css("margin-left","140px");
        }
        else
        {
            $("#content").removeAttr("style");
        }
    };

Answer 1

你可能需要做数学题，因为这不是我的强项，但类似的东西应该有用

var contentWidth = $('#content').width();
var leftWidth = $('#left').width();

$(window).resize = function(event) {
    var windowWidth = window.innerWidth;
    if (windowWidth <= (contentWidth + (leftWidth * 2)) {
        $('#content').css('margin-left', leftWidth);
    } else {
        $('#content').css('margin-left', 'auto')
    }
}

demo

编辑:更改为使用 jQuery .resize 而不是覆盖 onresize