javascript - Stellar.js on page reload background-position gets wrong - Stack Overflow

admin管理员组

文章数量:1392002

I am using Stellar.js v0.6.2 jQuery plugin to display 6 background images with parallax effect.

Everything works fine on first load of the page, but if I reload/refresh it, I see that the background-position settings are wrong and the parallax effects are ruined.

This is Stellar.js settings that I use:

scrollProperty: 'scroll',
positionProperty: 'position',
horizontalScrolling: false,
verticalScrolling: true,
horizontalOffset: 0,
verticalOffset: 0,
responsive: false,
parallaxBackgrounds: true,
parallaxElements: true,
hideDistantElements: true,

This is what I have in HTML source, as an example:

<section class="visible" id="contact" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="200"></section>

This is how correct background position looks when page is opened for a first time:

<section class="visible" id="contact" data-stellar-vertical-offset="200" data-stellar-background-ratio="0.6" style="background-position: 30px 82.4701px;"></section>

This is how it looks when I refresh the page:

<section class="visible" id="contact" data-stellar-vertical-offset="200" data-stellar-background-ratio="0.6" style="background-position: 30px -305.2px;"></section>

As you see, the negative value -305.2px is what ruins the page.

Any idea why this is happening and what can I do to prevent that?

THOUGHTS: Is it related to offsets? Can't find an answer, need a helping hand.

I am using Stellar.js v0.6.2 jQuery plugin to display 6 background images with parallax effect.

Everything works fine on first load of the page, but if I reload/refresh it, I see that the background-position settings are wrong and the parallax effects are ruined.

This is Stellar.js settings that I use:

scrollProperty: 'scroll',
positionProperty: 'position',
horizontalScrolling: false,
verticalScrolling: true,
horizontalOffset: 0,
verticalOffset: 0,
responsive: false,
parallaxBackgrounds: true,
parallaxElements: true,
hideDistantElements: true,

This is what I have in HTML source, as an example:

<section class="visible" id="contact" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="200"></section>

This is how correct background position looks when page is opened for a first time:

<section class="visible" id="contact" data-stellar-vertical-offset="200" data-stellar-background-ratio="0.6" style="background-position: 30px 82.4701px;"></section>

This is how it looks when I refresh the page:

<section class="visible" id="contact" data-stellar-vertical-offset="200" data-stellar-background-ratio="0.6" style="background-position: 30px -305.2px;"></section>

As you see, the negative value -305.2px is what ruins the page.

Any idea why this is happening and what can I do to prevent that?

THOUGHTS: Is it related to offsets? Can't find an answer, need a helping hand.

• javascript
• jquery
• scroll
• parallax
• background-position

Share Improve this question Follow edited Aug 26, 2013 at 18:47 CamSpy asked Aug 25, 2013 at 10:10 CamSpyCamSpy 40122 gold badges1515 silver badges2626 bronze badges 1

• Looks like this is logged and not handled. Issue #60 github./markdalgleish/stellar.js/issues/60 – ProVega Commented Feb 15, 2014 at 0:53

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Run into the same problem. To solve this add background-attachment: fixed; to the css of the element.

Source: http://markdalgleish./projects/stellar.js/docs/

I was suffering a similar issue but with positioned image elements rather than background images.

My initial solution was to move my stellar specific code from the $(document).ready() event to $(window).load(). This led me to the realisation that the image dimensions weren't available to stellar when the DOM was ready.

After adding CSS height and width attributes for the out of place elements the issue disappeared.

Try the following:

responsive: true,

I had the same problem. My mistake was, that i had put my javascript which calls my stellar.js function into the head of the document; instead of putting it into the body!

I was unaware of the fact that apperently the browser loads the head only the first time when the site is entered. therefore if you refresh the page, it will not reload your stellar.js function you put in the head, thus it will not correctly refresh the background-position values.

By puttting you javascript into the body you can make sure that the script is reloaded every time you refresh the page.

本文标签： javascriptStellarjs on page reload backgroundposition gets wrongStack Overflow