0

我创建了一个简单的页面来尝试在相对模式下使用 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');
}

我确定我看多了一些明显的东西..但我似乎无法弄清楚它可能是什么。我上传了一个简单的日期来演示我在说什么。我在这里先向您的帮助表示感谢！

演示链接

4

1 回答 1

2

Skrollr 改变height了身体。在计算一切的过程中，它被设置为auto（可能是错误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多余的。

于 2014-03-19T20:14:01.857 回答