Question

下面是完全代表实际代码的演示代码

我在红色div上放置了一些内容，希望用户在页面加载时能够看到它们。问题是我正在此页面上使用 scrollmagic.js 动画。一切工作正常，但是当我尝试使用 smoothscroll 时，scrollmagic的.setPin功能停止工作。动画仍在工作，但是红色div与其他div一起滚动。我希望红色div停留在该位置，直到动画结束为止。 平滑滚动 在动画完成之前将红色的div沿其他div插入。

您能帮我在红色div的位置固定并保持响应状态的同时，将绿色和蓝色的div放在红色的下面吗？

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Test Code</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>

</head>


<style>
  .viewport {
    overflow: hidden;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  .scroll-container {
    position: absolute;
    overflow: hidden;
    z-index: 10;
    display: flex;
    justify-content: center;
    backface-visibility: hidden;
    transform-style: preserve-3d;
  }
  
  .div1 {
    width: 70%;
    height: 70vh;
    border: 5px solid red;
    position: fixed;
    transform: translateX(20%);
  }
  
  .div2 {
    width: 70%;
    height: 70vh;
    border: 5px solid green;
    transform: translateX(20%);
  }
  
  .div3 {
    width: 70%;
    height: 70vh;
    border: 5px solid blue;
    transform: translateX(20%);
  }
</style>



<body>

  <div class="div1"></div>

  <div class="viewport">
    <div id="scroll-container">

      <div class="div2"></div>
      <div class="div3"></div>


    </div>
  </div>

</body>

<script>
  var html = document.documentElement;
  var body = document.body;

  var scroller = {
    target: document.querySelector("#scroll-container"),
    ease: 0.05, // <= scroll speed
    endY: 0,
    y: 0,
    resizeRequest: 1,
    scrollRequest: 0,
  };

  var requestId = null;

  TweenLite.set(scroller.target, {
    rotation: 0.01,
    force3D: true
  });

  window.addEventListener("load", onLoad);

  function onLoad() {
    updateScroller();
    window.focus();
    window.addEventListener("resize", onResize);
    document.addEventListener("scroll", onScroll);
  }

  function updateScroller() {

    var resized = scroller.resizeRequest > 0;

    if (resized) {
      var height = scroller.target.clientHeight;
      body.style.height = height + "px";
      scroller.resizeRequest = 0;
    }

    var scrollY = window.pageYOffset || html.scrollTop || body.scrollTop || 0;

    scroller.endY = scrollY;
    scroller.y += (scrollY - scroller.y) * scroller.ease;

    if (Math.abs(scrollY - scroller.y) < 0.05 || resized) {
      scroller.y = scrollY;
      scroller.scrollRequest = 0;
    }

    TweenLite.set(scroller.target, {
      y: -scroller.y
    });

    requestId = scroller.scrollRequest > 0 ? requestAnimationFrame(updateScroller) : null;
  }

  function onScroll() {
    scroller.scrollRequest++;
    if (!requestId) {
      requestId = requestAnimationFrame(updateScroller);
    }
  }

  function onResize() {
    scroller.resizeRequest++;
    if (!requestId) {
      requestId = requestAnimationFrame(updateScroller);
    }
  }
</script>

</html>

Answer 1

使用self.title将红色div置于其他div上方： https://www.w3schools.com/cssref/pr_pos_z-index.asp

z-index

如何将绿色div放在红色的下面？

1 个答案: