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

链接到JSFiddle示例代码;https://jsfiddle.net/m9r510xq/5/

我正在尝试使一个头具有以下行为;

1. 当用户向下滚动页面时，头部得到一个CSS类(.state-up)，将其拉起并完全隐藏。
2. 每当用户在页面上向上滚动时，头部得到一个CSS类(.state-partial)，使其回落一点，部分显示一点头部(顶部的一些隐藏而底部的一些可见)。
3. 当用户返回到页面的顶部时，头部得到一个CSS类(.state-down)，它将头部返回到正常状态，并完全显示。

这是我到目前为止的代码;

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

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

• 如果它们向下滚动，它会删除任何与向上滚动和位于顶部相关的样式，并且只应用与向下滚动相关的样式。
• 如果它们向上滚动，它会删除任何与向下滚动和位于顶部相关的样式，并且只应用与向上滚动相关的样式。

但是，当页面返回到顶部时，它会删除任何与滚动方向相关的样式，并仅应用与顶部相关的样式。

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

我最初使用这个例子:https://jsfiddle.net/mariusc23/s6mLJ/31/但是，我没有这样做，因为我想确保我想要应用的逻辑在最小状态下是可能的。