Jquery Starfield Plugin On Scrollable Page

Question

I am using the JQuery Starfield plugin that creates a starfield background. http://rocketwagon.github.io/jquery-starfield/

I love how this plugin works, but if the page content makes the page scrollable, the background does not scoll. The starfield will remain in place and then the regular background shows.

Does anyone know how to solve this?

I'm hoping someone else has used this plugin.

The way that this plugin works is you create a container for your content.

The container properties are as follows:

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

You have to use position: relative; and z-index: 1; because the starfield covers your content if you do not give your content a z-index above 1.

I created this jsfiddle as an example but I cannot seem to load jquery in it. It has my full code though.

Change to `position:fixed;`. Also http://i.imgur.com/MQdHmuc.gif — Jan, Aug 08 '15 at 23:09
Lol nice Gif and thanks for the working fiddle :) I don't use it too often so i didn't know what i did wrong. What fixed it? — Jesse Elser, Aug 08 '15 at 23:27
https://youtu.be/WHrn_pHW2so?t=1m2s `position:fixed;` makes the element not scroll. So setting fixed on the star container will make it, well, not scroll. — Jan, Aug 08 '15 at 23:48

score 1 · Accepted Answer · edited May 23 '17 at 11:58

First, in order to use raw GitHub links in JSFiddle, I referenced this question which recommends using RawGit to get the proper headers and MIME type for JSFiddle.

Second, viewing the content that jQuery Starfield produces, it's clear to me that you can't easily append it to a container that has scrolling content. It injects a canvas tag with the following CSS:

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

Given that, it seems like what you want to do is separate your StarField container from your content container. Something like this:

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

With the following CSS:

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

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

Note that you do not need the z-index on #container. Since it and #starfield are both positioned absolute, the latter element stacks above the former. It's best to avoid using z-index unless it's absolutely (no pun intended) necessary.

I forked your Fiddle to prove the basic concept, although you'll need to fine tune and update other CSS I'm sure: http://jsfiddle.net/87uepudL/

I'll give this a try and see what happens. – Jesse Elser Aug 08 '15 at 23:28 — Jesse Elser, Aug 08 '15 at 23:28

Jquery Starfield Plugin On Scrollable Page

1 Answers1