jquery - 滚动 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>

.il div 的背景在视差中表现得很好。 .w-line 和 .b-line div 的虚线边框也可以在视差中很好地滚动。但是这两个 div 在 css 文件中最初有 top 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();
上激活 Stellar
• 从元素中删除填充和边距
• 记住相对位置或绝对位置

这些总是为我解决问题