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

Question

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

标签。当第一部分的底部位于视口(viewport)顶部时，第一部分应该淡出。但它没有使用该部分，而是使用标签来触发动画。

<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 改变 body 的高度。在计算一切的过程中，它设置为auto(可能是bug https://github.com/Prinzhorn/skrollr/issues/347)，后来又设置为需要的高度，这与你的100%冲突(它被覆盖)。

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

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