Initial top position changes when scrolling stellar.js parallax element

Question

I have three div elements to scroll with parallax effect relative to their parent div.

<div class="section" id="social">
    <div data-stellar-ratio="0.6" class="w-line"></div>
    <div data-stellar-ratio="0.7" class="b-line"></div>
    <div data-stellar-background-ratio="0.5" class="il"></div>
</div>

The .il div has a background which is scolled well in parallax. The .w-line and .b-line divs have their dashed borders which are also scrolled well in parallax. BUT these two divs have initially top 500px and 400px in the css file but when i start to scroll, these initial top values change and the elements jump to another top value starting the scroll from that new top point.

CSS

#social {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    background: url(../uploads/parallax.jpg) no-repeat fixed center top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.il {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 3;
    width: 100%;
    height: 100%;
    background: url(../uploads/il.png) 0px 0px no-repeat fixed;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -ms-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%; 
}
.b-line {
    position: relative;
        left: -50px;
        top: 400px;
    width: 150%;
    border-bottom: 2px dashed #333333;
        -webkit-transform: rotate(10deg);
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    transform: rotate(15deg);
}
.w-line {
        position: relative;
        left: -50px;
        top: 500px;
    width: 150%;
    border-bottom: 2px dashed #f0efeb;
        -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg);
}

The jquery

<script type="text/javascript">
    $(document).ready(function() {

        // run parallax
        $('#social').stellar();
        $.stellar({
            // Set scrolling to be in either one or both directions
            horizontalScrolling: false,
            verticalScrolling: true,

            // Set the global alignment offsets
            horizontalOffset: 0,
            verticalOffset: 0,

            // Refreshes parallax content on window load and resize
            responsive: true,

            // Select which property is used to calculate scroll.
            // Choose 'scroll', 'position', 'margin' or 'transform',
            // or write your own 'scrollProperty' plugin.
            scrollProperty: 'scroll',

            // Select which property is used to position elements.
            // Choose between 'position' or 'transform',
            // or write your own 'positionProperty' plugin.
            positionProperty: 'position',

            // Enable or disable the two types of parallax
            parallaxBackgrounds: true,
            parallaxElements: true,

            // Hide parallax elements that move outside the viewport
            hideDistantElements: true,

            // Customise how elements are shown and hidden
            hideElement: function($elem) { $elem.hide(); },
            showElement: function($elem) { $elem.show(); }
        });

    });
</script>

If you can tell me how to avoid jumping to another top value and start scrolling from the initial top point...

Answer 1

First post on Stack Overflow hello!

If you get this issue try:

• Activating Stellar on $(window).load();
• Cutting out padding and margin from the element
• Remember position relative or absolute

These have always fixed it for me

Answer 2

As nobody gave me direction, i have choosen a not so nice solution, if someone has the same problem, i suggest for alternative solution wwhich is very simple :

• i made my lines with png images, exactly the same size (width and height) like the .il image (important).
• i inserted two empty divs into the html part, just like the .il div and corrected the ratio to background-ratio.
• i gave the same style to the new divs in the css file, like to the Il div, but of course with their own background image.
• after seeing others' stellar script, i have changed mine a little bit.

Now, nothing jumps after starting the scroll, everything starts from its initial point just like at the load...

HTML

<div class="section" id="social">
    <div data-stellar-background-ratio="0.6" class="w-line"></div>
    <div data-stellar-background-ratio="0.7" class="b-line"></div>
    <div data-stellar-background-ratio="0.5" class="il"></div>
</div>

CSS

.il,
.b-line,
.w-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -ms-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
}
.il {
    background: url(../uploads/il.png) left top no-repeat fixed;
    z-index: 3;
}
.b-line {
    background: url(../uploads/line-b.png) left top no-repeat fixed;
    z-index: 1;
}
.w-line {
    background: url(../uploads/line-w.png) left top no-repeat fixed;
    z-index: 1;
}

The change of my script at the beginning :

$('#social').stellar();
$(function(){
    $.stellar({
        // Set scrolling to be in either one or both directions
        horizontalScrolling: false,
        verticalScrolling: true,
...