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);

这是一个正在发生的事情，它覆盖了页面，我需要它转移到容纳侧板。

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添加炫酷的滑块效果！

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

2 个答案: