Question

我正在尝试使用条件创建以下功能......

用户从屏幕顶部向下滚动（例如120px），HTML类“state-nav-is-hidden”被添加到HTML标记中。
滚动课程后，当他进入BOTTOM时，'state-nav-is-visible'取代上面的HTML课程。
此外，如果用户在底部之前滚动并停止，则向上滚动向上30px，“state-nav-is-visible”替换隐藏的标记。

以下仅完成1.任何想法？谢谢！

<script type="text/javascript"> 
$(function() {
    //caches a jQuery object containing the header element
    var header = $("html");
    $(window).scroll(function(event){
        var lastScrollTop = 120;
        var st = $(this).scrollTop();

        if (st > lastScrollTop){
            header.removeClass("state-nav-is-visible").addClass('state-nav-is-hidden');
        } else {
            header.removeClass('state-nav-is-hidden').addClass("state-nav-is-visible");
        }        
    });
});
</script>

Answer 1

st > lastScrollTop

是1的正确条件。

st + $(window).height() === document.height

是2的收费。

我没有真正得到第3点，但你必须衡量它。打开Chrome和控制台作为单独的窗口并输入当前状态，如下所示：

$(window).scroll(function(event){
    console.log("Top: " + $(this).scrollTop() + ", Bottom: " + ($(this).scrollTop() + $(window).height()));
});

然后在滚动时观察输出。

编辑：

考虑到对答案的评论，我决定仔细看看小提琴。我理解迈克州，因为他想要解决第3点，但不幸的是，我仍然不清楚，但考虑到他问这么好并且如此一致地解决这个问题的事实，我做了一个猜测。如果我的猜测有任何问题，请告诉我。一切都是根据你的小提琴写的。

HTML：

<div class="wrapper">
    <div class="inner"></div>
</div>

CSS：

div.wrapper {
    height:2000px
}
.state-nav-is-visible{
    background-color:red;
}
.state-nav-is-hidden{
    background-color:green;
}

JS：

$(function() {
    //caches a jQuery object containing the header element
    var header = $("html");
    var reachedBottom = false;
    $(window).scroll(function(Event){
        var lastScroll = 120;

        var st = $(this).scrollTop();
        //var bs = $(window).scrollTop() + window.innerHeight == $(document).height();

        if (st < lastScroll){
            header.removeClass('state-nav-is-hidden').addClass('state-nav-is-visible');
        } 
        else if (st + $(window).height() === document.height) {
            header.removeClass('state-nav-is-hidden');
            reachedBottom = true;
        } else if ((reachedBottom) && (st + $(window).height() <= document.height - 30)) {
            reachedBottom = false;
            console.log((st + $(window).height() - (document.height - 30)));
        }
/*
        else if (How do I get current position and if scrolled UP 30 PIXELS do something) {
            alert('test');
        }
*/
        else {
            header.addClass("state-nav-is-hidden");
        }
    });
});

jQuery滚动时添加/删除类

1 个答案: