How to make an element only show on a container while scrolling

Question

I made a 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;
}

Basically I want the content to only show when it hits a certain point (in this case the lens of the glasses). I'm stuck. I've been trying for a whole day.

The closest answer i've found is this post: parent & child with position fixed, parent overflow:hidden bug

but I need the parent to scroll with the frame. Is there a work around where the parent container can still be fixed while the child can be scrolled?

frnt · Answer 1 · 2017-08-06T15:32:38.500

There would many other way to do this, have to do bit calculations, but initially I will suggest you to read about scrollTop() method and scroll event listener. This will get you vertical scroll position, so using that you can fadeIn and fadeOut that text.

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

um correct me if im wrong but would this just fade the text container? it would still overflow outside the lens of the glasses. — Yuki, Aug 06 '17 at 15:32
@Yuki Yes it overflows as soon as it move up of lens, below it will be hidden. You want it to be visible inside lens only. — frnt, Aug 06 '17 at 15:34
yes i want it to be visible inside the lens only. I've tried what you told me but it shows the whole text. can you walk me a bit on how you would do it? — Yuki, Aug 06 '17 at 22:56
Hi @Yuki I have created this sample solution, which isn't correct solution, but could give you basic idea how you could add text between that image i.e. lens https://jsfiddle.net/g3xytkr3/1/ — frnt, Aug 10 '17 at 07:15

How to make an element only show on a container while scrolling

1 Answers1