当前位置: 代码迷 >> JavaScript >> 背景色也固定在滚动魔术上
  详细解决方案

背景色也固定在滚动魔术上

热度:29   发布时间:2023-06-05 16:01:55.0

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

我无法完全理解您要达到的效果,但如果我正确理解,似乎可以通过将CSS的“ home”背景附件设置为fixed来实现。

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: ://jsfiddle.net/rvh0vhms/

您可能不应在背景图像容器上使用setPin(),而应仅在父容器或主体上设置背景图像。

  相关解决方案