JQuery 如何通過滾動元素的 Position 來隱藏 DOM

Question

我想在圖像位於頂部時顯示標題，而當它們不再位於頂部時我想隱藏它們。 它有點工作，但它不再隱藏元素並且彈出有點不可預測。 我怎樣才能讓這段代碼更好地工作？

我對這種方法的來源： 站點點和堆棧溢出

我使用此代碼檢查屏幕上圖像的 position：

 $(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 語句的條件為真時，我分配一個 class 並將其從 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>