Question

我创建了一个简单的页面来试验Skrollr在相对模式下使用它。我设置了2个部分，第一部分有一个标记，第二部分有一个

标记。当第一部分的底部位于视口的顶部时，第一部分应该淡出。但不是使用该部分，而是使用标签来触发动画。

<section id='burger'>
            <div class='background' data-top="opacity:1" data-top-bottom="opacity:0" data-anchor-target="#burger">
                    <h1>Welcome to the page!</h1>
            </div>
        </section>

第二部分也有背景div，该动画应该是动画的形象飞机在顶部开始100px，在中心开始为0px，在底部开始为-100px。图像看起来似乎始终处于-100px的位置。

 <section id='plane'>
            <div class='background' data-top="background-position: 50% 100px;" data-center="background-position: 50% 0px;" data-bottom="background-position: 50% -100px;" data-anchor-target="#plane">
                <p>Cras nulla odio, fringilla nec libero in, tristique rutrum elit. Phasellus ut tellus non metus pellentesque lacinia at eget tellus. Sed dapibus turpis eu rhoncus lacinia. Mauris ornare arcu et justo facilisis iaculis. Nam ultricies accumsan lacinia. Morbi sit amet nisi vitae turpis feugiat elementum. Phasellus tempor porta arcu non semper. Quisque vitae urna sed mi scelerisque tincidunt. Mauris nulla odio, tempus sit amet fermentum ac, egestas in lacus. Aliquam suscipit velit enim, ac pharetra magna gravida sit amet. In eu libero rhoncus purus tincidunt commodo a venenatis purus. Sed a nibh sed mauris consequat blandit. Morbi ut faucibus ante. In nunc arcu, sodales vel molestie sit amet, mollis quis urna. Aenean pretium facilisis erat. </p>
            </div>
        </section>

的CSS：

html, body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
}

h1{
    padding: 0;
    margin: 0;
}

section{
    height: 100%;
    min-height: 100%;
    width: 100%;
}


.background{
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    min-height: 100%;
    width: 100%;
}

#burger{
}

#burger .background{
    background-image: url('../img/burger.jpg');
    border: 3px solid green;
}

#plane .background{
    background-image: url('../img/plane.jpg');
}

我确定我看起来很明显......但我似乎无法弄清楚它可能是什么。我上传了一个简单的日期来演示我正在谈论的内容。感谢您的帮助！

demo link

Answer 1

Skrollr更改了身体的height。在计算所有内容的过程中，它设置为auto（可能是错误https://github.com/Prinzhorn/skrollr/issues/347），然后设置为所需的高度，这与您的100%（它被覆盖）冲突。< / p>

要禁用此行为，请在初始化skrollr时将forceHeight选项设置为false。

编辑：关于你的评论（背景的跳跃）实际上非常简单：在你的情况下data-top === data-bottom，因为该部分有height:100%（顶部将是在底部将在底部的同时在顶部）。你想要的是data-bottom-top和data-top-bottom。 data-center也是多余的。

Skrollr响应H1标签而不是容器标签

1 个答案: