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会根据窗口的视觉高度（而不是相对父级的视觉高度）来计算元素的高度，这意味着可以使用的技术并不重要。 t影响以内联样式插入到页面的计算。但是您还有其他UX技巧可以做到这一点，例如可以打开菜单并与实际菜单重叠一会的按钮。

但是...

您可以使用骇客的js影响控制高度的元素

import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

export default class TabIcon extends Component {
    render() {
        var color = this.props.selected? '#FFBD05':'white';
        return(
            <View>
                <Icon style={{color: color}} name={this.props.iconName||"circle"} size={40}/>
            </View>
        )
    }
}

这将为您提供足够的空间在顶部放置一些东西，并记住// 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'的身体而不是您拥有的transform: translateY(##)道具

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

1 个答案: