javascript - 如何使元素在滚动时仅显示在容器上

Question

我做了一个 fiddle 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 事件监听器 的内容。这将使您获得垂直滚动位置，因此您可以使用它淡入和淡出该文本。

.scrollTop() - Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

$(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>