如何将整个页面移动到插入侧面板的右侧？

Question

我想将一个侧面板注入到当前页面（用于构建书签）。然而，它似乎只是重叠了页面的左侧部分，我的目标是将整个页面移动到此插入面板的右侧。

//initilaize 
    var sidebar; 
    $('body').css({ 
    'padding-right': '350px' 
    }); 
    sidebar = $("<div id='sidebar'></div>"); 
    sidebar.css({ 
    'position': 'fixed', 
    'left': '0px', 
    'top': '0px', 
    'z-index': 9999, 
    'width': '290px', 
    'height': '100%', 
    'background-color': 'blue' // Confirm it shows up 
    }); 
    $('body').append(sidebar); 

这里发生了什么，它覆盖了网页的的jsfiddle，我需要它转移到适应的侧面板。

http://jsfiddle.net/DT3k7/

Answer 1

将身体的css更改为padding-left或margin-left而不是正确。

$('body').css({ 
    'padding-left': '350px' 
}); 

Answer 2

尝试添加margin-left的身体，当你追加的侧栏。不知道padding-right来自哪里。这对我的jsfiddle工作。

$('body').ready(function(){ 
    $('body').append(sidebar) 
    $('body').css({ 
     'margin-left':'290px' 
    }); 
    }); 

你甚至可以添加使用jQuery UI凉爽的滑盖效果！