将工具栏div插入页面并向下推主体
[英]Insert a toolbar div to a page and push the body down
问题描述
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 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 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;
}
JS JS
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. 在JS代码中，如果我将div附加到html标签而不是body，则代码可以正常工作，但是我不想在body标签之外添加div。 I don't want to use an iframe either, just a div. 我也不想使用iframe，而只能使用div。 How would I do this? 我该怎么做？ Here is a JSbin link. 这是一个JSbin链接。
2 个解决方案
解决方案1
1 已采纳 2015-10-05 03:11:28
Here, fixed the code. 在这里，固定代码。 You had applied a wrong CSS on body tag using your javascript. 您使用JavaScript在body标签上应用了错误的CSS。 The change is on Javascript only 更改仅在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
0 2015-10-05 03:20:05
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.