JQuery

Question

Link 到 JSFiddle 示例代码； https://jsfiddle.net/m9r510xq/5/

我正在尝试制作具有以下行为的 header；

每当用户在页面上向下滚动时，header 会得到一个 CSS class (.state-up) 将其拉起并完全隐藏。
每当用户在页面上向上滚动时，header 会得到一个 CSS class (.state-partially) 将其拉回一点，部分显示header 的一部分（部分顶部隐藏，部分底部可见）。
当用户 returns 到达页面的最顶部时，header 得到一个 CSS class (.state-down) returns 将 header 恢复到正常状态，完全显示出来。

这是我目前的代码；

$(window).scroll(function (event) {

    var st = $(this).scrollTop();
    var lastScrollTop = 0;

    if (st > 0) {
        if (st > lastScrollTop) {
            // downscroll code
            $('.a').removeClass('state-down');
            $('.a').removeClass('state-partially');
            $('.a').addClass('state-up')
        } else {
            // uproll code
            $('.a').removeClass('state-down');
            $('.a').removeClass('state-up');
            $('.a').addClass('state-partially')
        }
    } else {
        $('.a').removeClass('state-up');
        $('.a').removeClass('state-partially');
        $('.a').addClass('state-down')
    }
});

这里的逻辑是检查页面是否已经滚动到页面顶部。如果有，它会检查用户滚动的方向。

如果他们向下滚动，它会删除与 up-scrolls 关联并位于顶部的任何样式，并且仅应用与 down-scrolls 关联的样式。
如果他们向上滚动，它会删除与 down-scrolls 关联并位于顶部的所有样式，并仅应用与 up-scrolls 关联的样式。

但是，当页面 returns 位于顶部时，它会删除任何与 scroll-direction 相关联的样式，并仅应用与位于顶部相关联的样式。

我没有预先在 HTML 中应用样式到 header，我只通过这个脚本应用和更改样式。

我最初使用的是这个例子：https://jsfiddle.net/mariusc23/s6mLJ/31/ 但是，我退出了它，因为我想确保我想应用的逻辑在最小状态下是可能的。

Answer 1

每次滚动 window 时，您的 lastScrollTop 变量都会设置为零。您需要将该变量放在滚动事件之外。

然后，在滚动函数的末尾，将 lastScrollTop 设置为当前调用的 st 的值。这样 lastScrollTop 将在下次调用滚动事件时可用。

这是一个工作示例：

var lastScrollTop = 0;
$(window).scroll(function (event) {
    
    var st = $(this).scrollTop();
    
    if (st > 0) {
        if (st > lastScrollTop) {
            // downscroll code
            $('.a').removeClass('state-down');
            $('.a').removeClass('state-partially');
            $('.a').addClass('state-up')
        } else {
            // uproll code
            $('.a').removeClass('state-down');
            $('.a').removeClass('state-up');
            $('.a').addClass('state-partially')
        }
    } else {
        $('.a').removeClass('state-up');
        $('.a').removeClass('state-partially');
        $('.a').addClass('state-down')
    }
    lastScrollTop = st;
});

body {
    height: 2000px;
}
.a {
    height: 300px;
    width: 300px;
    display: block;
    background-color: green;
    position: fixed;
}
.state-down {
    top: 0px;
}
.state-partially {
    top: -150px;
}
.state-up {
    top: -300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
    <div class="a">A</div>
</div>

和 jsFiddle 版本：https://jsfiddle.net/m9r510xq/6/

JQuery - 向下滚动时隐藏，向上滚动时部分显示，在顶部时完全显示

JQuery - Hide on Scroll Down, Partially Show on Scroll Up, Fully Show when at Top

html

javascript

css

scroll