javascript - 使用 JS/CSS 将元素堆叠在固定元素之上

Question

我正在将一些 Javascript 代码写入页面，这些页面将一个 div 添加到本应保留在文档或窗口顶部的正文中，而不管页面的设计/内容如何，​​并且在出现之前一直运行良好跨固定顶部的标题元素。

我试图仅使用 CSS/JS 完成的是无论如何都将 jsbar 保持在顶部。如果页面上有元素，例如示例中的元素，则 jsbar 应该堆叠在元素上方，而不是在类似层的上方或下方。换句话说，如果有固定的 top:0，将它向下移动 jsbar 的高度，使所有其他元素的新 top=0+heightofjsbar。

请参阅问题的原始基本示例:http://jsfiddle.net/XEZ5R/

<div class="jsbar">This is dynamically created jsbar</div>
<div class="page">
<header>The header bar</header>
<div class="content">the content here </div>
</div>

.page {
    position:relative;
    top:0;
    background:#f8f8f8;
    height:900px;
}
header {
    position:fixed;
    top:0;
    background:#eee;
    height:10px;
}
.jsbar {
    position:fixed;
    top:0;
    background:#ccc;
    height:10px;
}

如果有任何解决此问题的想法，我将不胜感激。我对页面的篡改越少越好。 jsbar被写入各种网站，各种设计/元素。

谢谢。

---

更新:这是所需结果的示例: http://jsfiddle.net/Zzat9/1/ (查看结果，无视html/css)

此外...我只能使用 Javascript，不能使用 jQuery，而且我只能控制在文档顶部输出/添加的 Javascript 和 CSS...我无法控制其他任何内容。因此，对于此处的示例...将 jsbar 以外的所有内容都视为所有者页面/内容/元素。

我的想法是，它会使用一些 Javascript 来查找相对于文档具有 position:fixed 或 absolute 的元素，然后将它们向下移动到 jsbar 的高度。类似于:how to query whole DOM for elements matching some computed style ? (in pure js)

---

更新 2:

我想出了这个 Javascript 来做需要的事情:

var docelements = document.querySelectorAll('header, div, section');
var jsbarheight = '25px';
for (var i=0, max=docelements.length; i < max; i++) 
{
    if(window.getComputedStyle(docelements[i],null).getPropertyValue('position')=='fixed')
    {
        var fixedelement = docelements[i];
        if(window.getComputedStyle(fixedelement,null).getPropertyValue('top')=='0px')
        {      
            fixedelement.style.top=jsbarheight;
            document.body.style.paddingTop=jsbarheight;
        }
    }
}

但这是最有效的吗？有人看到这有什么问题吗？直接的缺点是进行调整的延迟。

Answer 1

抱歉，如果您不能使用 jQuery，但也许这仍然会让您开始使用 JS 解决方案:

var height = $('.jsbar').outerHeight(true);
$('.page').css("margin-top", height+"px");

这使得 .page 元素的 margin-top 与 .jsbar 的高度无关。你可以在这里看到 jsfiddle:http://jsfiddle.net/Koubenec/Wm6k6/9/

希望这对您有所帮助!

编辑:

好的，只有 JS 代码:

var finder = document.getElementsByClassName("jsbar")[0];
var findrheight = finder.clientHeight;
var main = document.getElementsByClassName("page")[0];
main.style["margin-top"] = findrheight+"px";

这在这个 jsfiddle 中有效:http://jsfiddle.net/Koubenec/7j5cL/2/

我认为您可能仍希望移动一些元素，但此 JS 函数获取 jsbar 的高度，然后将该大小的边距添加到页面元素的顶部，因此它被向下推。如果需要，您可以轻松调整以相应地定位页眉。

编辑:取 3-

var finder = document.getElementsByTagName("div")[0];
var findrheight = finder.clientHeight;
var main = document.getElementsByTagName("header")[0];
main.style["margin-top"] = findrheight+"px";

这段代码只是找到第一个标签元素，获取它的高度，然后找到第一个元素并给它一个等于 jsbar 高度的 margin-top。这样，您不需要 ID 或类名即可工作。这是另一个 jsfiddle:http://jsfiddle.net/Koubenec/7j5cL/3/