JQuery Как скрыть DOM по позиции прокрутки элемента

Question

Я хочу показать заголовки, когда изображение вверху, и я хочу скрыть их, когда их больше нет сверху. Это вроде работает, но больше не скрывает элементы, а всплывающее окно немного непредсказуемо. Как я могу заставить этот код работать лучше?

Мои источники для этого подхода: sitepoint и переполнение стека

Я использую этот код для проверки положение изображений на экране:

$(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()">&#9776; </button> 
</div>
<div id="mySidebar" class="sidebar">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</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>

Answer 1

Спасибо, Марк, у меня все получилось. Я назначаю класс и удаляю его из div, когда условие оператора if истинно. еще я удаляю его.

Извините, я пытался создать работающий фрагмент, но не смог заставить его работать. Я не уверен, что делает мой код: /

Я нашел похожий подход здесь: sitepoint

Сценарий:

$(document).scroll(function(){
    $(".grid-item").each(function(){
        var el = $(this);
        var top = el.offset().top - $(document).scrollTop();
        /*console.log("p"+el.attr("id"));
        console.log(el.attr("id") +(" ")+ top);*/
        if (top < 400 && top > 0) {
            $("#p" + el.attr("id")).addClass("show");
            return;
        }else {
            $("#p" + el.attr("id")).removeClass("show");
            return;
        };
    })
});

css :

.desc{
    display:none;
    float: left;
    bottom: 10px;
    left: 10px;
    z-index: 10;
}

.show{
    display: block;
}

html структура (джекилл):

    </div>
        <div class="floater">
            {% assign AbbCounter = 0 %}
            {% for desc in page.descs%}
            {%  assign AbbCounter = AbbCounter | plus: 1 %}
                <div class="desc"; id="p{{forloop.index}}">
                <p> Abb. {{AbbCounter}}: {{desc}}</p>
                </div>
            {% endfor%}
        </div>
    </div>


    <div class="grid-container">
        <div class="floater"></div>
    {% assign someVar = 0 %}
    {% for image in site.static_files %}

        {% if image.path contains '06_PraktikumP3' %}
        {%  assign someVar = someVar | plus: 1 %}

            <div class="grid-item"; id="{{someVar}}">
                <img class="resize" src="{{ site.baseurl }}{{ image.path }}">
                </video>
            </div>
        <!--class="resize"; src="{{ site.baseurl }}{{ image.path }}" alt="{{forloop.index0}}" />-->
        {% endif %}

    {% endfor %}

    </div>

Answer 2

Вот пример использования классов и пересмотренного набора кода и уродливого, но наглядного контента.

$(document).on('scroll', function() {
  $(".grid-item").each(function() {
    let el = $(this);
    let top = el.offset().top - $(document).scrollTop();
    //console.log(top);
    let shouldShow = top > 0 && top < 200;
    el.find('.title').toggleClass("hidden", shouldShow);
    return;
  });
});

.hidden {
  display: none;
}

.my-things {
  border: 1px solid red;
 
}

.grid-item {
  width: 100%;
  height: 10em;
  border: solid green 2px;
}
.grid-item .title {
  width: 100%;
  height: 2em;
  border: solid orange 2px;
}
.grid-item .thing {
  width: 100%;
  height: 7em;
  border: solid blue 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-things">

  <div class='grid-item'>
    <div class="title">griddler1</div>
    <div class="thing">thing 1</div>
  </div>
  <div class='grid-item'>
    <div class="title">griddler2</div>
    <div class="thing">thing 2</div>
  </div>
  <div class='grid-item'>
    <div class="title">griddler3</div>
    <div class="thing">thing 3</div>
  </div>
  <div class='grid-item'>
    <div class="title">griddler4</div>
    <div class="thing">thing 4</div>
  </div>
  <div class='grid-item'>
    <div class="title">griddler5</div>
    <div class="thing">thing 5</div>
  </div>
</div>