jquery - 可滚动页面上的Jquery Starfield插件

我正在使用创建星空背景的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。它有我的完整代码。

最佳答案

首先，为了在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。

尽管您需要微调和更新其他CSS，但我确信您的Fiddle会证明基本概念，我确定：http://jsfiddle.net/87uepudL/

关于jquery - 可滚动页面上的Jquery Starfield插件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31899366/