当滚动stellar.js视差元素时，初始顶部位置改变

Question

我有三个div元素要使用相对于父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>

.ildiv的背景在视差中滚动得很好。w-line和b-linediv的虚线边界也可以在视差中滚动。但是这两个div在css文件中的初始顶值分别是500px和400px，但是当我开始滚动时，这些初始顶值会改变，元素会跳到另一个顶值，从新的顶点开始滚动。

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);
}

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>

如果你能告诉我如何避免跳转到另一个顶部值，并开始从初始顶部点滚动…

Answer 1

关于Stack Overflow的第一篇文章

如果您遇到此问题，请尝试:

• 在$(window).load();上激活恒星
• 删除元素
的内边距和边距
• 记住位置的相对或绝对

这些总是为我修复它

Answer 2

由于没有人给我方向，我选择了一个不太好的解决方案，如果有人有同样的问题，我建议一个替代的解决方案，这是非常简单的:

• 我用png图像制作线条，大小(宽度和高度)与。il图像(重要)完全相同。
• 我在html部分插入了两个空div，就像。ildiv一样，并将比例调整为background-ratio。
• 我给了css文件中的新div相同的样式，就像对Ildiv一样，但当然有他们自己的背景图像。在看了别人的明星脚本后，我已经改变了我的一点。

现在，开始滚动后没有任何跳转，所有内容都从初始点开始，就像加载时一样。

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;
}

开头脚本的改动:

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