Question

我正在开发一个Chrome扩展程序，需要在一些网页的顶部插入一个固定iframe的位置。我无法控制将要修改的页面。目前我可以插入iframe，但它会覆盖部分页面，但我希望能够为它预留空间。问题是当我在页面正文中添加边距或填充时，页面上的其他固定元素与它们的位置不符。

如何使用javascript注入一个元素，我可以100％确定它会显示在页面顶部并且不会隐藏它下面的任何内容，或者搞乱其他地方的位置？

Answer 1

循环通过固定元素并将“top”属性增加一个等于插入元素高度的数量。

var myTop;

$('body div').each(function(){
   if($(this).css('position')=='fixed'){
      myTop = $(this).css('top');
      $(this).css('top',mytop + 100);
   };
});

我很确定你必须做一些研究和调整才能让它100％工作。例如，'body div'选择器只会将固定div向下移动100个像素。您可以在此处查看更多信息：

虽然只是为了警告你，这在某些页面上可能是一个缓慢的过程。其他人可能有更好的方法。

Answer 2

如何应用于正文-webkit-transform: translateY(*your_block_height*px)，然后将您的iframe作为第一个孩子添加到正文并应用-webkit-transform: translate(-*your_block_height*px)

使用javascript＆amp; amp将元素插入页面相应地向下翻页。

2 个答案: