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

时间:2018-10-02 23:36:25

标签: javascript jquery userscripts tampermonkey

我有一个用户脚本,该脚本向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;}
    `);

此方法适用于大多数网站,但是对于底部具有固定元素的网站,底部元素被切除

With my bar the bottom element gets cut off

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

good bottom

是否有更可靠的方法在页面顶部插入元素?

我已经搜索了,但是我似乎无法自己弄清楚。

Here's a link to my full code

1 个答案:

答案 0 :(得分: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(##)道具