Question

我正在将一些Javascript代码写入页面，这些页面会将div添加到应该保留在文档或窗口顶部的主体，无论页面具有什么样的设计/内容，并且工作正常，直到来到横跨标题元素固定顶部。

我只想用CSS / JS来完成，无论如何都要将jsbar保持在最顶层。如果页面上有元素（如示例中所示），则jsbar应堆叠在元素上方而不是在相同图层之上或之下。换句话说，如果顶部有一些固定的东西：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来查找具有位置的元素：相对于文档的固定或绝对，然后将它们向下移动到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/

使用JS / CSS在固定元素上方堆叠元素

1 个答案: