Question

我有一个单页滚动网站，我正在努力。我正在尝试使用Scroll magic来固定第一部分，然后将网站的其余部分滚动到顶部。正如你可以在我的小提琴中看到的那样，第一部分是固定的，但其余部分只是内容滚动而不是背景颜色。我不确定为什么会这样。你可以在这里看到我的意思fiddle ...

Answer 1

我无法完全理解你想要达到什么样的效果，但如果我理解正确的话，通过在CSS中设置“主页”背景附件来实现这一点会更容易。

Answer 2

ScrollMagic设置位置：固定在＆＃34;固定＆＃34;的元素上。固定元素将stack above their relative/static siblings。

观察这个简单的HTML / CSS：

<style type="text/css">

.fixed {
  position: fixed;
  background: red;
  width: 100%;
  height: 30px;
}

</style>

<div class="fixed"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis suscipit enim, non sodales tortor ultrices ut. Duis ac sodales eros. In sed feugiat est, vulputate scelerisque orci. Ut eleifend accumsan nibh quis placerat. Etiam non auctor velit. Suspendisse potenti. In ullamcorper arcu vel elementum congue. Suspendisse a tellus sodales, tempor arcu in, egestas odio. Phasellus rutrum sed lorem eget scelerisque. Quisque sed metus a mauris tempor tristique ac eget est.</p>

JSFiddle：https://jsfiddle.net/rvh0vhms/

您可能不应在背景图像容器上使用setPin（），而只需在父容器或正文上设置背景图像。

背景颜色也固定滚动魔术

2 个答案: