javascript - 背景颜色也与滚动魔术固定

Question

我有一个正在开发的单页滚动网站。我正在尝试使用滚动魔法固定第一部分，然后让网站的其余部分滚动到它​​的顶部。正如您在我的小提琴中看到的，第一部分是固定的，但其余部分只有内容滚动而不是背景颜色。我不确定这是为什么。你可以看到我在这里的意思小提琴...

Answer 1

我无法完全理解您要达到的效果，但如果我理解正确，通过在 CSS 中将“home”背景附件设置为固定似乎更容易做到这一点。

Answer 2

ScrollMagic 设置位置：固定在“固定”的元素上。固定元素将堆叠在它们的相对/静态兄弟之上。

观察这个简单的 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()，而只需在父容器或主体上设置背景图像。