如何將整個頁面移動到插入側面板的右側？

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涼爽的滑蓋效果！