How to create element only on container on scrolling
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 am stuck. I've been trying all day.
The closest answer I've found is this post: fixed position parent and child, parent overflow: hidden error
but I need a parent to scroll with a frame. Is there a work around where the parent container can still be fixed as long as the child can scroll?
source to share
There would be a lot of other way to do this, bit calculations need to be done, but initially I suggest you read about the scrollTop()
and method scroll event listener
. This will result in a vertical scroll position, so you can fadeIn and fadeOut this text.
.scrollTop () - Get the current vertical position of the scrollbar for the first item in a set of matched items, or set the vertical position of the scrollbar for each matched item.
$(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>
source to share