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

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

javascript jquery html css

Javascript 将工具栏div插入页面并向下推主体,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想在单击按钮时将工具栏插入主体。它应该固定在顶部，即使用户向下滚动，也应该保持在顶部。我在向下移动主体时遇到了一些问题，因为工具栏覆盖了一些主体内容，并且在顶部留下了空白。这是我的密码 HTML JS 函数注入（）{ var sg_div=$（''）.attr（'id'，'customToolbar1234'）.addClass（'selectorgadget_bottom'）.addClass（'selectorgadget_ignore'）； $（'body'）。追加（sg_div）；变

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

HTML

函数注入（）{
var sg_div=$（''）.attr（'id'，'customToolbar1234'）.addClass（'selectorgadget_bottom'）.addClass（'selectorgadget_ignore'）；
$（'body'）。追加（sg_div）；
变量第一个按钮=$（''）；
sg_div.append（第一个按钮）；
$（'body'）.css({
“transform”：“translateY（35px）”，
“转换”：“转换0.4s轻松”
});
}

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

这里，修复了代码。您使用javascript在body标记上应用了错误的CSS。更改仅在Javascript上进行

函数注入（）{
//var url=chrome.extension.getURL（'toolbar.html'）；
var sg_div=$（''）.attr（'id'，'customToolbar1234'）.addClass（'selectorgadget_bottom'）.addClass（'selectorgadget_ignore'）；
$（'body'）。追加（sg_div）；
变量第一个按钮=$（''）；
sg_div.append（第一个按钮）；
$（'body'）.css({
“padding top”：“35px”，
“转换”：“转换0.4s轻松”
});
}

#自定义工具栏1234{
位置：固定！重要；
顶部：0！重要；
左：0！重要；
宽度：100%！重要；
高度：35px；
边界：0！重要；
背景：#e3！重要；
z指数：9999999！重要；
}


JS-Bin
你好
注射

有没有理由不在车身上使用衬垫顶部？此外，如果没有特殊原因，也不要直接在js中添加css。而是在css中应用一个类和目标。这是一个例子

<!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>

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