I want to show titles when a image is at the top and I want to hide them when they are not anymore at the top. It kind of works, but it does not hide the elements anymore and the pop up is a bit unpredictable. How can I make this code work better?
My sources for this approach: sitepoint and stack overflow
I use this code to check the position of the images on the screen:
$(document).scroll(function() {
$(".grid-item").each(function() {
var el = $(this);
var top = el.offset().top - $(document).scrollTop();
if (top < 200 && top > 0) {
document.getElementById("p" + el.attr("id")).style.visibility = "visible";
return;
};
if (top > 200 && top < 0) {
document.getElementById("p" + el.attr("id")).style.visibility = "hidden";
return;
};
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidenav">
<h1>{{page.titel}}</h1>
<p>{{page.technik}},<br>{{page.datum}}</p>
<div class="textp1">{{page.beschreibung}}</div>
<div class="werk">
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ </button>
</div>
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
{% for projekt in site.projekte%}
<a href="{{projekt.url}}">{{projekt.titel}} </a>
{% endfor%}
</div>
{% for desc in page.descs%}
<div class="desc"; id="p{{forloop.index}}">
<p> {{desc}}</p>
</div>
{% endfor%}
</div>
<div class="grid-container">
<div class="floater"></div>
{% assign someVar = 0 %}
{% for image in site.static_files %}
{% if image.path contains '04_Skizzenbuch' %}
{% assign someVar = someVar | plus: 1 %}
<div class="grid-item"; id="{{someVar}}"><img class="resize"; src="{{ site.baseurl }}{{ image.path }}" alt="{{forloop.index0}}" /></div>
{% endif %}
{% endfor %}
</div>