如何使一個元素只顯示一個容器上滾動時

Question

我做了一個小提琴here

HTML

<div class="section"> 
    <img class="glasses" src="https://cdn.pbrd.co/images/GEpcSsv.png" alt=""> 
    <div class="text"> 
     <div class="text-wrap"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio quisquam enim, voluptatem, inventore corrupti obcaecati ab veritatis nisi unde modi eius accusantium in fugit! Et impedit, assumenda culpa, a minus illo voluptate aperiam esse inventore dolorum rerum, reprehenderit repellat, numquam repellendus amet voluptatem veritatis. Et omnis, minus! Ea quasi assumenda vitae dolores blanditiis, qui voluptas sed adipisci a ipsa quo excepturi in labore totam praesentium similique, deserunt eius modi, dolore commodi rerum, saepe distinctio. Delectus qui facere, saepe similique non rem laboriosam odit ducimus, corporis ullam aliquid in fugit recusandae perspiciatis ipsum! Voluptate eaque maiores deserunt consequuntur vero adipisci deleniti.</p> 
     </div> 
    </div> 
</div> 

CSS

.section{ 
    position: relative; 
    height: 2000px; 
} 

.section img.glasses{ 
    position: fixed; 
    top: 15%; 
    z-index: 3; 
} 

.section .text{ 
    position: relative; 
    top: 300px; 
    left: 230px; 
    height: 100%; 
    width: 350px; 
    background-color: red; 
    border: 10px solid red; 
    z-index: 2; 
} 

基本上我想要的內容只顯示當它擊中某個點（在這種情況下，眼鏡的鏡頭）。我卡住了。我一直在嘗試一整天。

最接近的答案我發現的是這個帖子：parent & child with position fixed, parent overflow:hidden bug

但我需要家長與框架滾動。在孩子可以滾動的時候父容器仍然可以固定在哪裏？

Answer 1

還有很多其他的方式來做到這一點，必須做點位計算，但最初我會建議你閱讀scrollTop()方法和scroll event listener。這將讓你垂直滾動的位置，所以使用你可以淡入和淡出文本。

.scrollTop（） - 獲取滾動條的當前垂直位置對於該組匹配元件的第一 元件或一組 滾動條的垂直位置爲每個匹配的元素。如果我錯了

$(document).ready(function() { 
 

 
    $(window).on("scroll", function() { 
 
    var wn = $(window).scrollTop(); 
 
    if (wn >= 50) { 
 
     $(".section .text").css("opacity", 1); 
 
    } else { 
 
     $(".section .text").css("opacity", 0); 
 
    } 
 
    }); 
 
});

.section { 
 
    position: relative; 
 
    height: 2000px; 
 
} 
 

 
.section img.glasses { 
 
    position: fixed; 
 
    top: 15%; 
 
    z-index: 3; 
 
} 
 

 
.section .text { 
 
    position: relative; 
 
    top: 300px; 
 
    left: 230px; 
 
    height: 100%; 
 
    width: 350px; 
 
    z-index: 2; 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="section"> 
 
    <div class="sf-wrapper"> 
 
    <img class="glasses" src="https://cdn.pbrd.co/images/GEpcSsv.png" alt=""> 
 
    <div class="text"> 
 
     <div class="text-wrap"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio quisquam enim, voluptatem, inventore corrupti obcaecati ab veritatis nisi unde modi eius accusantium in fugit! Et impedit, assumenda culpa, a minus illo voluptate aperiam esse inventore 
 
      dolorum rerum, reprehenderit repellat, numquam repellendus amet voluptatem veritatis. Et omnis, minus! Ea quasi assumenda vitae dolores blanditiis, qui voluptas sed adipisci a ipsa quo excepturi in labore totam praesentium similique, deserunt 
 
      eius modi, dolore commodi rerum, saepe distinctio. Delectus qui facere, saepe similique non rem laboriosam odit ducimus, corporis ullam aliquid in fugit recusandae perspiciatis ipsum! Voluptate eaque maiores deserunt consequuntur vero adipisci 
 
      deleniti.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>