1

我正在尝试在 iframe 顶部放置一个透明条。当我在页面上向下滚动时，我想要内容上方的透明条。

首次加载时页面应如下所示：http://cl.ly/image/2V0s2B3P2e3D，然后向下滚动时应如下所示：http://cl.ly/image/3x133T3k3a3p

这是我正在使用的 HTML：

<div style="position:fixed;top:0;left:0;width:100%;height:60px;background:#000;opacity:0.8;z-index:50;color:#fff;"></div>
<iframe src="http://en.wikipedia.org" style="border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%">

我希望一些 javascript 可以帮助我解决这个问题，但我对它不是很熟悉，所以我会很感激一些帮助。

4

1 回答 1

0

如果您的iframe域与您的主页相同，那么很容易：

  1. 将 iframe 的top位置设置在标题栏下方（即60px）；
  2. 在其内容中监听scroll事件；
  3. 每次用户滚动 iframe 时top根据属性进行调整。scrollTop

HTML（就像你的一样，只是top改变了：

<iframe ... style="... top:60px; ...">

JavaScript（在 jQuery 中load）：

$("iframe").contents().scroll(function(e) {
    var top = 60 - $(this).scrollTop();
    if ( top < 0 )
        top = 0;
    $("iframe").css("top", top);
});

这是一个工作演示。

原始答案（对于域不同的情况）：

如果您的iframe域与您的主页不同，这将有点困难，因为您不能（出于安全原因）从外部访问内部页面的 DOM 元素（或 JavaScript） - 反之亦然反之亦然。所以，你不能监听内页AFAIK的滚动事件。

在这里，我将展示一个“丑陋”的解决方法：让你变得iframe非常大，将它放在栏的下方，当用户滚动鼠标滚轮时，top更改iframe. 我为此使用了jquery-mousewheel插件：

<iframe src="http://en.wikipedia.org" style="border: 0; position:fixed;
 top:60px; left:0; right:0; bottom:0; width:100%; height:10000%">

...

$("html, body").mousewheel(function(e,d,dx,dy) {
    var iframe = $("iframe");
    var top = parseInt(iframe.css("top"))+10*dy;
    if ( top > 60 )
        top = 60;
    iframe.css("top", top);
});

这是一个工作演示。缺点是没有可见的滚动条（因此鼠标滚轮是滚动的唯一控件）并且也无法将iframe高度调整为与内容一样大（因为由于来源不同，您无法知道它的高度我之前提到的约束）。

不幸的是，只有在某些浏览器（例如 Chrome）中，当鼠标悬停在iframe. 在其他（例如 Firefox）中，只有当您将鼠标滚动到透明栏上时它才会起作用。

于 2013-07-13T22:05:40.483 回答