Javascript -添加顶部固定条，并将所有其他元素向下推

Javascript - Adding a top fixed bar and push all the other elements down

本文关键字：其他 元素 下推 添加 顶部 Javascript      更新时间：2023-09-26

我试图在一个网页上添加顶部栏，其中有2个其他元素是top:0和位置:固定。例如，考虑一个网站的wp-admin栏和一个固定在顶部的菜单栏。

我正在创建一个插件&所以我不能修改网站的代码，但可以重写样式。

这是我的CSS: 
.bar-render-top
{
    top:0px;
    margin-top: 0px;
    position: fixed;
    z-index: 999999;
    width:100% !important;
}

我可以看到酒吧，但其他人都隐藏在它下面。我希望他们"向下移动"。我可以添加自定义css，并找到元素的css和添加边距，但由于这是一个插件，它应该在任何网站上工作。所以我不能添加特定于网站的样式。

理想情况下，这应该像mozbar chrome插件一样，它添加了一个顶部栏作为iframe。

这可能吗?任何帮助将是非常感激的。谢谢。

body {
    background-color: white;
    margin: 0;
    padding: 0;
    padding-top: 90px;
}
.fixed-bar {
    width: 100%;
    position: fixed;
    top: 0;
    height: 40px;
    line-height: 40px;
    text-align: center
}
.bar-1 {
    background-color: gold;
}
.bar-2 {
    background-color: pink;
    margin-top: 40px;
}
.my-bar {
    background-color: blue;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: white;
}
<div class="fixed-bar bar-1">
    fixed bar one
</div>
<div class="fixed-bar bar-2">
    fixed bar two
</div>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales libero enim, sed convallis leo ornare eget. Nullam condimentum, diam ullamcorper sollicitudin fringilla, eros nisi placerat tellus, at volutpat velit felis eu ipsum. Suspendisse sed
    nisl a orci dapibus euismod et eget odio. Maecenas elementum erat elit, et efficitur ex feugiat ac. Nam convallis blandit nisl, finibus pretium tortor vehicula at. Sed ultricies finibus consectetur. Nulla nec diam a velit pellentesque consequat ut
    a lorem. Fusce eget massa lorem. In egestas risus non nisi condimentum facilisis. Quisque vulputate est ut odio vestibulum, at vulputate tellus lacinia. Ut interdum magna id velit lacinia, nec lobortis velit consequat. Ut et malesuada risus. In interdum
    eleifend est auctor tincidunt. Nulla facilisi. Proin faucibus ex euismod, porta purus ut, volutpat nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut mattis volutpat tempus. Vivamus condimentum velit in
    lacus ultrices ultricies. Morbi bibendum mauris ac pretium sagittis. Duis eget augue dapibus, convallis ante ut, accumsan ligula. Morbi cursus tellus viverra justo rutrum lobortis
</div>
<div class="my-bar">
    this has to be on the top of any generic page
</div>

我最终在渲染和滚动事件中为固定元素添加了margin-top。

我的主顶栏被渲染为<div id="appbar-container">...</div> id(以避免被推太)。然后我这样做:

const APPBAR_HEIGHT = 64;
const translateFixed = () => {
    Object.assign(document.body.style, {
      position: "relative",
      top: APPBAR_HEIGHT + "px",
    });
    for (let e of Array.from(document.body.getElementsByTagName("*"))) {
      if (
        e instanceof HTMLElement &&
        e.getAttribute("id") !== "appbar-container"
      ) {
        const position = getComputedStyle(e)
          .getPropertyValue("position")
          .toLocaleLowerCase();
        const top = e.getBoundingClientRect().top;
        if (position === "fixed" && top >= 0 && top <= APPBAR_HEIGHT) {
          e.style.marginTop = APPBAR_HEIGHT + "px";
          e.classList.add("appbar-offset");
        } else if (e.classList.contains("appbar-offset")) {
          e.style.marginTop = "0";
        }
      }
    }
};
  
// Initial push
translateFixed();
// Push on scroll
document.addEventListener("scroll", translateFixed);

老实说，我并不为此感到骄傲，我认为还有改进的空间……但是，它是有效的。

如果你知道你的栏的高度，你可以用你自己的块包裹页面的所有内容，在上面添加一些空白，然后使用JS添加你的栏。此外，这将是很好的设置一个背景颜色，你的酒吧。下面是一个使用jQuery的例子:

$('body').children().wrapAll('<div class="bar-render-content" />');
$('body').prepend('<div class="bar-render-top">Test bar</div>');
.bar-render-top
{
    top:0px;
    margin-top: 0px;
    position: fixed;
    z-index: 999999;
    width:100% !important;
    margin-bottom:50px;
    background-color: lightgrey;
}
.bar-render-content
{
  margin-top:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div class="any">
Any text
</div>
<div class="content">
Lorem ipsum porttitor malesuada fusce adipiscing gravida eu sit tellus nam justo sem metus, elementum lorem adipiscing. Enim commodo malesuada porttitor ultricies diam, auctor congue sodales eros sem quisque, risus magna donec integer, lorem donec diam magna vivamus. Adipiscing bibendum pellentesque curabitur orci proin tempus sapien amet: lorem tempus. Quam nam, ipsum magna justo nam lorem nam, eu a fusce donec sed eget metus mauris ligula sagittis rutrum ultricies non at. Sed quisque lectus duis, ut magna malesuada: vivamus — in sagittis porta tempus: curabitur odio — magna risus, sapien — elementum, maecenas porttitor risus integer.
Urna amet orci auctor elementum, magna justo arcu a auctor bibendum sem proin auctor amet justo metus morbi odio maecenas porttitor. Porta magna integer porttitor tellus eros nec ultricies magna rutrum curabitur, porttitor integer nam, sem non orci non nulla.
</div>
</body>

相关文章：