How to add chrome extension on top of the window without hiding some content of the current page

Question

I tried to add the extension by iframe as describes here:. Then I added padding to the top of the body of the document (documnent.body) But in some pages there is a navigator/menu bar with position: "fixed" that this trick is not work on. In other words, the iframe is hide the navigator/ menu bar which remain in the same location.) Can I catch this " header" or fixed position Navigator and edit it? Or Is there any another way to execute it.

var iframe = document.createElement('iframe'); 
iframe.style.background = "#c2e9fb";
iframe.style.height = "0px";
iframe.style.width = "100%";
iframe.style.position = "fixed";
iframe.style.top = "0px";
iframe.style.right = "0px";
iframe.style.zIndex = "9000000000000000000";
iframe.frameBorder = "none"; 
iframe.src = chrome.extension.getURL("index.html")

document.body.appendChild(iframe); 

function toggle(url) {
    let isClosed = iframe.style.height === "0px"
    iframe.style.height = isClosed ? "300px" : "0px"
    document.body.style.paddingTop = isClosed ? "300px" : "0px" 
}