JQuery如何通过元素的滚动位置隐藏DOM

Question

我想在图像位于顶部时显示标题，而在不再位于顶部时隐藏它们。它可以工作，但是不再隐藏元素，弹出窗口有点不可预测。如何使此代码更好地工作？

我的这种方法的来源：sitepoint和stack overflow

我使用此代码来检查图像在屏幕上的位置：

$(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

这是一个使用类和经过修改的代码集以及难看但说明性内容的示例。

$(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>

Answer 2

[谢谢马克，我以这种方式工作。当if语句的条件为true时，我分配一个类并将其从div中删除。否则，我将其删除。

[抱歉，我试图制作一个片段，但我无法使它起作用。我不确定我的代码在做什么：/

我在这里找到了类似的方法：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结构（jekyll）：

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