可滚动页面上的 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;，因为如果您不在1 上方为您的内容提供z-index，星空会覆盖您的内容。

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

Answer 1

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

其次，查看 jQuery Starfield 生成的内容，我很清楚不能轻易地将其附加到具有滚动内容的容器中。它使用以下 CSS 注入 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。

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