可滚动页面上的 Jquery Starfield 插件

Question

我正在使用创建星空背景的 JQuery Starfield 插件。 http://rocketwagon.github.io/jquery-starfield/

我喜欢这个插件的工作方式，但如果页面内容使页面可滚动，则背景不会滚动。星空将保持原位，然后显示常规背景。

有人知道怎么解决吗？

我希望其他人已经使用过这个插件。

此插件的工作方式是为您的内容创建一个容器。

容器属性如下:

#container {
   width: 100%;
   height: 100%;
   position: relative;
   z-index: 1;
}

你必须使用 position: relative; 和 z-index: 1; 因为如果你不给你的内容一个 z 星空会覆盖你的内容-index 高于 1。

我创建了这个 jsfiddle作为一个例子，但我似乎无法在其中加载 jquery。不过它有我的完整代码。

Answer 1

首先，为了在 JSFiddle 中使用原始 GitHub 链接，我 referenced this question建议使用 RawGit为 JSFiddle 获取正确的 header 和 MIME 类型。

其次，查看 jQuery Starfield 生成的内容，我很清楚您不能轻易地将它附加到具有滚动内容的容器中。它使用以下 CSS 注入(inject)一个 canvas 标签:

position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;

鉴于此，您似乎想要做的是将 StarField 容器与内容容器分开。像这样:

<div id="starfield"></div>
<div id="container">
  <!-- content here -->
</div>

使用以下 CSS:

#starfield {
  position: absolute;
  width: 100%;
  height: 100%;
}

#container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
}

请注意，您不需要 #container 上的 z-index。因为它和 #starfield 都是绝对定位的，所以后者元素堆叠在前者之上。最好避免使用 z-index，除非它是绝对必要的(没有双关语意)。

我 fork 了你的 Fiddle 来证明基本概念，尽管你需要微调和更新其他 CSS 我敢肯定:http://jsfiddle.net/87uepudL/