Skip to content

hideDistantElements hides elements when they touch the viewport edges #7

frischmilch opened this Issue May 6, 2012 · 6 comments

4 participants


The setting
hideDistantElements: true
does hide elements if the top part hits the viewport edge, let them disappear too quickly.

strange thing is, that I see a different behaviour some times when I reload my page.

using latest version of stellar (may5th) and chrome 19.

example (in progress):



I've had a bit of a look and there's a few of things you're doing which is throwing off the calculations.

1) Any parallax element needs to have its height specified. The reason it changes when you reload the page is that you're catching the images at various stages of loading.

2) You've got parallax elements with a 'top' value of '50%'. Stellar.js doesn't support percentage values because elements need to be adjusted up or down in pixels relative to their starting positions. Instead, try nesting elements inside other elements that are set to 'top: 50%'. I haven't tried it before so I'm not sure if it will work.

3) You've got elements positioned with negative margins. This is something that I didn't have in mind originally, I only assumed that the margin would make the element larger, but your massive negative margins are making the elements' outer heights negative numbers. If you modify your page as per my previous point, you'll find that you shouldn't need negative margins.

If you update your site to reflect these and you're still having problems, feel free to file another more specific issue :)


thank you so much for the responve.
that sounds logical, although I must have missed the height thing. the massive negative margins on top are for vertical centering. I will rebuilt and see what is happening.


thank you very much, Mark — defining a height and absolute pixel positions resolved these issues.

I extended stellar.js to let elements stop at their final position, will fork later.


Hey Mark, might be worth adding the "height must be specified" thing to the docs page. I had the same problem & only fixed it after arriving at this issue via google.

maloky commented May 25, 2013

in deed, the height property is a must in documentation. i've been wondering what the problem was because i only had the bug shown up in chrome. safari, firefox and opera seemed to have no problem running without those being defined. all works like a char now.thank you all.


@bensmithett @maloky I've pushed an update to the readme to clarify this requirement. Let me know if you think I could have explained it better.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.