I have created a simple script that allows selected objects to fade in as the user scrolls down. However, my issue is that this script is quite rigid. If I were to apply it to 20 different objects, for example, I would need to manually adjust the height each time. Here is an illustration of this:
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 500) {
$(".header-js-scroll-fade").css({"opacity" : "1"});
$(".home-vorteile").addClass("header-img-fade-in-by-scroll");
}
else {
$(".header-js-scroll-fade").css({"opacity" : "0"});
$(".home-vorteile").removeClass("header-img-fade-in-by-scroll");
}
});
});.header-js-scroll-fade {
opacity: 0;
transition: 0.5s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="vorteile-text">Building Trust Through,</h1>
<section class="home-vorteile">
<div class="header-js-scroll-fade header-img-fade-in-by-scroll">
<img src="https://via.placeholder.com/500" />
<h2>Security.</h2>
</div>
<div class="header-js-scroll-fade header-img-fade-in-by-scroll">
<img src="https://via.placeholder.com/500" />
<h2>Latest AI Technology.</h2>
</div>
<div class="header-js-scroll-fade header-img-fade-in-by-scroll">
<img src="https://via.placeholder.com/500" />
<h2>Premium Materials.</h2>
</div>
</section>