将工具栏div插入页面并向下推动主体

I want to inject a toolbar to a body when a button is clicked. It should be fixed at the top and should remain there even when the user scrolls down. I'm having some problems moving the body down because the toolbar covers some of the body content and leaves a blank space at the top. Here is my code

我想在单击按钮时将工具栏注入到主体。它应固定在顶部，即使用户向下滚动也应保持在那里。我在移动身体时遇到一些问题，因为工具栏覆盖了一些身体内容并在顶部留下了空白区域。这是我的代码

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <p>Hello</p>
    <button onclick="inject()">Inject</button>
  </div>
</body>
</html>

CSS

#customToolbar1234 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important; 
    height: 35px;
    border: 0 !important;
    background: #e3e3e3 !important;
    z-index: 9999999 !important;
}

function inject() {

    var sg_div = $('<div>').attr('id', 'customToolbar1234').addClass('selectorgadget_bottom').addClass('selectorgadget_ignore');
    $('body').append(sg_div);

    var first_button = $('<input type="button" value="0"/>');
    sg_div.append(first_button);


    $('body').css({
        'transform': 'translateY(35px)',
        'transition': 'transform 0.4s ease'
    });
}

In the JS code, If I append the div to html tag instead of body, then the code works fine but I don't want to add div outside of the body tag. I don't want to use an iframe either, just a div. How would I do this? Here is a JSbin link.

在JS代码中，如果我将div附加到html标签而不是body，那么代码工作正常，但我不想在body标签之外添加div。我也不想使用iframe，只是一个div。我该怎么办？这是一个JSbin链接。

2 个解决方案

#1

Here, fixed the code. You had applied a wrong CSS on body tag using your javascript. The change is on Javascript only

在这里，修复了代码。您使用javascript在body标签上应用了错误的CSS。此更改仅适用于Javascript

function inject() {

	//var url = chrome.extension.getURL('toolbar.html');

    var sg_div = $('<div>').attr('id', 'customToolbar1234').addClass('selectorgadget_bottom').addClass('selectorgadget_ignore');
    $('body').append(sg_div);

    var first_button = $('<input type="button" value="0"/>');
    sg_div.append(first_button);


	$('body').css({
    	'padding-top':'35px',
    	'transition': 'transform 0.4s ease'
	});


 
}

#customToolbar1234 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important; 
    height: 35px;
    border: 0 !important;
    background: #e3e3e3 !important;
    z-index: 9999999 !important;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <p>Hello</p>
    <button onclick="inject()">Inject</button>
  </div>
</body>
</html>

#2

Any reason not to use padding-top on the body? Also if you don't have a special reason for it, don't add css directly in the js. Instead apply a class and target that in css. Here's a jsbin.

有什么理由不在身上使用填充物？此外，如果您没有特殊原因，请不要直接在js中添加css。而是在css中应用一个类和目标。这是一个jsbin。

#1