javascript - iframe 顶部透明栏的问题，希望 javascript 可以修复

Question

我正在尝试在 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 可以帮助我解决这个问题，但我对它不是很熟悉，所以我希望得到一些帮助。

Answer 1

如果您的 iframe 域与主页相同，那就很简单:

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

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);
});               

这是一个working demo .

<小时/>

原始答案(对于域不同的情况):

如果您的 iframe 域与您的主页不同，那么这将有点困难，因为您无法(出于安全原因)访问 DOM 元素(或 JavaScript)内页与外页的区别 - 反之亦然。所以，你不能监听内页的滚动事件 AFAIK。

在这里，我将展示一个“丑陋”的解决方法:使您的 iframe 非常大，将其放置在栏下方，然后当用户滚动鼠标滚轮时更改 top iframe 的 CSS 属性。我正在使用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);
});

这是一个working demo 。缺点是没有可见的滚动条(因此鼠标滚轮是滚动的唯一控件)，而且也无法将 iframe 高度调整为与内容一样大(因为您无法由于我之前提到的不同原点约束，知道它的高度)。

不幸的是，只有在某些浏览器(例如 Chrome)中，当鼠标位于 iframe 上时，鼠标滚轮事件才会触发。在其他系统(例如 Firefox)中，只有将鼠标滚动到透明栏上时，它才会起作用。