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文件中最初有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，就像.il div一样，并将比率修正为背景比率。
我给css文件中的新div提供了相同的样式，比如Il div，但当然还有他们自己的背景图像。
看到别人后＆＃39;恒星剧本，我已经改变了我的一点点。

现在，在启动滚动后没有任何跳转，一切都从它的初始点开始，就像在加载时一样......

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,
...

滚动stellar.js视差元素时，初始顶部位置会发生变化

2 个答案: