在页面顶部插入 Div，插入 Div 后将所有内容向下移动

Question

I have a userscript that adds a navigation bar to Google similar to the one they had a few years back.
The way I have the script set up now I have to hard code CSS code for each site that it matches in order for my bar to be at the top of the page, and to shift everything down.

else if (/google.{2,6}forms/.test(vCurrentWebpage) == true ||
    /google.{2,6}slides/.test(vCurrentWebpage) == true ||
    /google.{2,6}sheets/.test(vCurrentWebpage) == true ||
    /google.{2,6}docs/.test(vCurrentWebpage) == true ||
    /google.{2,6}services/.test(vCurrentWebpage) == true ||
    /google.{2,6}cloudprint/.test(vCurrentWebpage) == true
) {
    GM_addStyle(`
    body{position:relative!important;
         top:29px!important;}
    .header,.stickyMobileHeader .mobileSearchWrapper,.mobileNavHeader{top:29px!important;}

    #GoogleBar{position:fixed!important;}
    `);

This method does work for most sites, but for sites with a fixed element on the bottom, the bottom element gets cut off :

But, the bottom element should be completely visible :

Is there a more reliable way to insert an element at the top of the page?

I've searched, and searched but I can't seem to figure this one out myself.

Here's a link to my full code

Answer 1

• Short Answer: you can't (in an elegant way)

• Long Answer: you still can't because google calculates the height of the elements based on the visual-height of the window, and not of the relative parents, meaning that doesn't matter the technique you can't affect the calculation that is inserted as inline-style to the page. but you still have other UX tricks to do that like a button that opens your menu and overlaps for a moment the real menu.

but...

you can affect the element that controls the height with a hacky js

// for google spreadsheets go to the console and try
var grid = $('.grid-table-container + .grid-table-container')
grid.style.height = parseInt(grid.style.height, 10) - 30 + 'px'

that will give you enough space to put something at the top and remember to transform: translateY(##) the body instead of the top prop that you have