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（） - 获取第一个滚动条的当前垂直位置匹配元素集中的元素或设置垂直位置每个匹配元素的滚动条。

＆＃13;

$(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);
    }
  });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

1 个答案: