javascript - 在页面顶部插入 div 而不使用 javascript 覆盖

Question

我想知道是否有人可以帮助我吗？

基本上我有一个 Javascript 片段，我希望能够提供给人们。所以以下是正确的:

我无法控制他们决定放置代码段的页面中的位置(出于各种原因)- 它可能在中间、末尾，任何地方。

该代码段所做的只是在其页面顶部放置一个小 DIV。目前我正在执行以下操作(这是代码片段):

<div id="mydiv" style="display:none; position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 40px; background-color:red; text-align:center; color:white"><br>Message Inside Div</div>
<script>if (Condition) { document.getElementById("mydiv").style.display = "block"; }</script>

现在，这很有用，当“条件”为真时，它会显示 div。但是，使用此方法，它会覆盖固定在页面顶部的 div。

但是，我也想这样做，以便将 div 插入页面顶部，但会像往常一样随页面滚动，并且不会覆盖顶部的内容(IE:当它出现时，它会将内容向下推出现)。

关于我将如何做到这一点的任何想法，请记住:我无权访问他们的页面(我什至不知道页面上还有什么)并且我给他们的代码片段可以在页面。

Answer 1

我想您无法避免干预现有代码和样式 - 但如果您担心 body 上现有的顶部边距，请先检查此值。 IE。获取正文顶部边距值，添加元素高度，重新应用。 jquery 语法中的示例(出于简单性，可以在 vanilla javascript 中执行相同的操作)

$('body').css('margin-top',$('body').css('margin-top') + yourdiv-height);