1

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

  1. 用户从屏幕顶部向下滚动（例如 120 像素），HTML 类“state-nav-is-hidden”被添加到 HTML 标记中。
  2. 当他滚动到 BOTTOM 后，“state-nav-is-visible”类替换了上面的 HTML 类。
  3. 此外，如果用户在底部之前滚动并停止，然后向上滚动 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>
4

1 回答 1

0 
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()));
});

然后在滚动时观察输出。

编辑：

考虑到对答案的评论，我决定仔细看看小提琴。我理解 Mike States，因为他想解决第 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");
        }
    });
});
于 2013-10-21T19:56:33.670 回答