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 语句的条件为真时，我分配一个类并将其从 div 中删除。否则，我将其删除。

抱歉，我尝试制作一个可以工作的 sn-p，但我无法让它工作。我不确定我的代码是做什么的：/

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