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

Question

我有一个用户脚本，它向 Google 添加了一个导航栏，类似于他们几年前的导航栏。
我现在设置脚本的方式必须为它匹配的每个站点硬编码 CSS 代码，以便我的栏位于页面顶部，并将所有内容向下移动。

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;}
    `);

此方法适用于大多数网站，但对于底部有固定元素的网站，底部元素会被截断：

但是，底部元素应该完全可见:

有没有更可靠的方法在页面顶部插入元素？

我搜索了又搜索，但我自己似乎无法弄清楚这一点。

Here's a link to my full code

Answer 1

简答：你不能（以优雅的方式）
长答案：你仍然不能，因为 google 计算元素的高度是基于 window 的视觉高度，而不是相对父元素的视觉高度，这意味着您不会影响作为内联样式插入到页面的计算的技术无关紧要。但您仍然有其他 UX 技巧可以做到这一点，例如打开菜单并与真实菜单重叠片刻的按钮。

但是...

你可以用 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'

这会给你足够的 space 在顶部放置一些东西并记住 transform: translateY(##) 主体而不是你拥有的 top 道具

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

Insert Div at the top of a page, shifting everything down after inserted Div

javascript

jquery

userscripts

tampermonkey