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的正确标题和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我确定：http://jsfiddle.net/87uepudL/

可滚动页面上的Jquery Starfield插件

1 个答案: