Question

:) 我在隐藏DIV时遇到了一些麻烦。

滚动donw，我可以在达到某个点时显示它，但是，当我达到OTHER点时，我想让它消失 - 然后向下滚动，使其再次出现。

我尝试添加另一个var（带有第3个点的名称），我甚至让它消失了，但是当再次向上滚动时，它开始闪烁。：（

有什么问题？我该怎么办？：（

    $(document).ready(function() {

$("#DIV1").hide(); //hide your div initially

var topOfOthDiv = $("#DIV2").offset().top;

$(window).scroll(function() {
    if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
        $("#DIV1").fadeIn(200); //reached the desired point -- show div
    }
});

$(window).scroll(function() {
    if($(window).scrollTop() < topOfOthDiv) { //scrolled past the other div?
        $("#DIV1").fadeOut(200); //reached the desired point -- show div
    }
});


});

Answer 1

它闪烁，因为你的两个if语句都是真的。所以它试图在同一时间淡入淡出。

我更新了您的fiddle，只有在两个div之间才会淡入。

我更改了它，因此首先检查它是否在第一个div之上。如果是，则隐藏特殊div。如果您滚过第一个div，则会检查相对于第二个div的位置并显示或隐藏它。

所以你的代码看起来像是：

$(document).ready(function() {

    $("#DIV1").hide(); //hide your div initially

    var topOfOthDiv1 = $("#DIV2").offset().top;
    var topOfOthDiv3 = $("#DIV3").offset().top;

    $(window).scroll(function() {
        if($(window).scrollTop() < topOfOthDiv1)
        {
             $("#DIV1").fadeOut(200); //reached the desired point -- show div
        }
        else
        {
            if($(window).scrollTop() < topOfOthDiv3) { //scrolled past the other div?
                $("#DIV1").fadeIn(200); //reached the desired point -- show div
            }
            else if($(window).scrollTop() > topOfOthDiv3) { //scrolled past the other div?
                $("#DIV1").fadeOut(200); //reached the desired point -- show div
            }
        }
    });

});

Answer 2

这可以通过媒体查询100％完成

.selector {
    display: none; /*by default*/
}


@media screen and (max-width: 1000px) {
    .selector {
        display: block;
    }
}

在某个点之后出现div而在其他特定点之后消失

2 个答案: