ScrollMagic：當它與固定區域重疊時隱藏內容

Question

我在我的頁面上使用ScrollMagic。下面是HTML：

<div class="container"> 

    <div class="before-trigger"> 
    </div> 

    <div class="trigger" id="trigger"> 
    </div> 

    <div class="pin-area" id="pin-area"> 
    This is a pinned area. 
    </div> 

    <div class="content"> 
    Lorem ipsum ... 
    </div> 

</div> 

這裏是我的javascript：

var controller = new ScrollMagic.Controller(); 
var scene1 = new ScrollMagic.Scene({triggerElement: "#trigger", triggerHook: 'onLeave'}) 
      .setPin("#pin-area") 
      .addTo(controller); 

這裏是的jsfiddle演示：https://jsfiddle.net/gg8t714q/2/

當向下滾動頁面，內容區域（div.content）與重疊固定區域。如何隱藏重疊區域中的內容而不隱藏背景圖片？換句話說，我能夠在固定區域看到背景圖像。

感謝您的幫助！

Answer 1

作爲解決辦法，您可以將您在.container規則中使用的背景項添加到.pin-area規則中。所以.pin-area是：

.pin-area { 
    background-image: url('http://www.nationalgeographic.com/content/dam/science/photos/000/011/1106.adapt.1900.1.jpg'); 
    background-position: right bottom; 
    background-attachment: fixed; 
    font-size: 2em; 
    color: #fff; 
    padding: 30px; 
    border: 2px solid #fff; 
    text-align: center; 
} 

var controller = new ScrollMagic.Controller(); 
 

 
var scene1 = new ScrollMagic.Scene({ 
 
    triggerElement: "#trigger", 
 
    triggerHook: 'onLeave' 
 
    }) 
 
    .setPin("#pin-area") 
 
    .addTo(controller);

body { 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    background-image: url('http://www.nationalgeographic.com/content/dam/science/photos/000/011/1106.adapt.1900.1.jpg'); 
 
    background-position: right bottom; 
 
    background-attachment: fixed; 
 
} 
 

 
.before-trigger { 
 
    height: 200px; 
 
} 
 

 
.trigger { 
 
    min-height: 1 
 
} 
 

 
.pin-area { 
 
    background-image: url('http://www.nationalgeographic.com/content/dam/science/photos/000/011/1106.adapt.1900.1.jpg'); 
 
    background-position: right bottom; 
 
    background-attachment: fixed; 
 
    font-size: 2em; 
 
    color: #fff; 
 
    padding: 30px; 
 
    border: 2px solid #fff; 
 
    text-align: center; 
 
} 
 

 
.content { 
 
    ; 
 
    height: 800px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script> 
 
<div class="container"> 
 

 
    <div class="before-trigger"> 
 
    </div> 
 

 
    <div class="trigger" id="trigger"> 
 
    </div> 
 

 
    <div class="pin-area" id="pin-area"> 
 
    This is a pinned area. 
 
    </div> 
 

 
    <div class="content"> 
 
    Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline 
 
    the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately 
 
    render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. 
 
    </div> 
 
</div>