我有一个用户脚本,该脚本向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;}
`);
此方法适用于大多数网站,但是对于底部具有固定元素的网站,底部元素被切除:
但是,底部元素应该完全可见:
是否有更可靠的方法在页面顶部插入元素?
我已经搜索了,但是我似乎无法自己弄清楚。
答案 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(##)
道具