Question

我正在使用Scroll Magic滚动内容并固定部分内容。这是HTML：

<div class="container">
  <div class="header">
    <div style="height:400px;">
    </div>
    <div id="trigger1" style="min-height: 1px"></div>
    <div id="pin" style="font-size: 30px; color: #fff;text-align:center;padding:30px 0;">
      This is header
    </div>
  </div>
  <div class="text-container">
    <p class="text">
       Lorem Ipsum is simply ....
    </p>
    <p class="text">
       Lorem Ipsum is simply ....
    </p>
    <p class="text">
       Lorem Ipsum is simply ....
    </p>
  </div>
</div>

这是Javascript：

      $(function () { 
           var controller = new ScrollMagic.Controller({
                globalSceneOptions: {
                    triggerHook: 'onLeave'
                }
            });
            var scene = new ScrollMagic.Scene({triggerElement: "#trigger1"})
                    .setPin("#pin")
                    .addTo(controller);
      });

这是jsfiddle：https://jsfiddle.net/mddc/93sagkab/27/

当＆＃39; .text＆＃39;在#pin内容下方向上移动，您可以看到它。当.text位于#pin时，如何使用CSS使E: Failed to fetch http://mirrors.kali.com/kali/dists/kali-rolling/main/binary-i386/Packages.gz File has unexpected size (15320738 != 15317336). Mirror sync in progress? [IP: 111.11.111.111 80] Hashes of expected file: - Filesize:15317336 [weak] - SHA256:c4762e83455984f8d3fb54f6f42836808b8c891ba117661b61240bc5774d2e02 - SHA1:fdebd56e7541e6f88d7910988ef694d3c409e21d [weak] - MD5Sum:51400b889af8677132f31d56f266bf22 [weak] Release file created at: Fri, 06 Oct 2017 06:55:45 +0000 E: Some index files failed to download. They have been ignored, or old ones used instead.不可见？我需要保持当前的设计，以山为背景。

Answer 1

您可以在.text元素中添加一个类作为场景的一部分。像这样：

 var scene = new ScrollMagic.Scene({triggerElement: "#trigger1"})
                    .setPin("#pin")
                    .setClassToggle(".text", "fade") //Add a class called "fade"
                    .addTo(controller);

然后在transition元素的css中定义.text。

.text {
  height: 1000px;
  transition: opacity 150ms ease-out; //Add this
}

然后定义.fade样式：

.text.fade {
  opacity: 0;
}

请参阅此fiddle。

在固定内容下使可滚动文本不可见

1 个答案: