javascript - 使用 javascript 将元素插入页面并相应地向下移动页面。

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 像素。您可以在这里查看更多信息：

• jQuery .each() 函数
• 选择具有特定 CSS 类的元素

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

Answer 2

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