Question

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

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

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

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

Answer 1

在这里，修复了代码。您使用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>

Answer 2

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

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

2 个答案: