jquery - 当绝对元素可见但保持居中时向页面内容添加边距

我有一个页面，其内容为中心width: 980px; margin: 0 auto;。我添加了一个侧边栏（显示/隐藏），它的位置绝对正确，我不希望它与内容重叠。我一直在尝试各种方法来解决此问题，方法是在内容中添加填充和边距等，但是没有任何结果可望，因为它当前在仍应居中时将内容向左拉。

JSFiddle http://jsfiddle.net/x06c3ysf/

$('#custom-sidebar').on('click', function () {
    $(this).toggleClass('hide');
    if ($(this).hasClass('hide')) {
        $('#inner').removeClass('adjust');
    } else {
        $('#inner').addClass('adjust');
    }
});

// run on page load
if ($('#custom-sidebar').hasClass('hide')) {
    $('#inner').removeClass('adjust');
} else {
    $('#inner').addClass('adjust');
}

所需结果：
内容始终以页面调整大小为中心，当页面狭窄到足以被侧边栏阻塞时，页面内容应位于侧边栏旁边。

最佳答案

你很亲密您需要在其中添加媒体查询，以防止执行“快照操作”

演示http://jsfiddle.net/x06c3ysf/7/

@media (max-width: 718px) {
    .adjust #inner {
        margin: 0 0 0 122px;
    }
}