Javascript - 添加頂部固定欄並將所有其他元素向下推

Question

我正在嘗試在一個網頁上添加頂部欄，該網頁有兩個其他元素，它們是 top:0 和 position:fixed。 例如，考慮一個帶有 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>

Answer 1

我最終在渲染和滾動事件中為固定元素添加了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);

老實說，我並不為此感到自豪，我認為還有改進的余地……但是，它確實有效。

Answer 2

如果你知道你的欄的高度，你可以用你自己的塊包裹頁面的所有內容，在它上面添加一些邊距，然后使用 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>

Javascript - 添加頂部固定欄並將所有其他元素向下推

問題描述

2 個解決方案

解決方案1
0 2021-02-17 16:52:57

解決方案2
-1 2016-10-03 08:55:35

Javascript - 添加頂部固定欄並將所有其他元素向下推

問題描述

2 個解決方案

解決方案1 0 2021-02-17 16:52:57

解決方案2 -1 2016-10-03 08:55:35

解決方案1
0 2021-02-17 16:52:57

解決方案2
-1 2016-10-03 08:55:35