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

使用示例代码链接到JSFIDLE

我试图创建一个具有以下行为的标题：

每当用户在页面上向下滚动时，页眉就会得到一个CSS类（.state up），该类会将其拉起并完全隐藏

每当用户在页面上向上滚动时，页眉就会得到一个CSS类（.state partially），该类会将页眉稍微向下滚动，部分显示页眉的一部分（顶部的一部分是隐藏的，而底部的一部分是可见的）

当用户返回到页面的最顶端时，页眉将获得一个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中的标题，我只是通过此脚本应用和更改样式

我最初使用的是这个示例：

---

但是，我退了一步，因为我想确保我想要应用的逻辑在最小状态下是可能的。

每次滚动窗口时，您的

lastcrolltop

变量都被设置为零。您需要将该变量置于滚动事件之外

然后，在滚动功能结束时，将当前调用的

lastScrollTop

设置为

st

。这样，下次调用scroll事件时，

lastScrollTop

将可用

以下是一个工作示例：

var lastScrollTop=0；
$（窗口）。滚动（功能（事件）{
var st=$（this.scrollTop（）；
如果（st>0）{
如果（st>lastScrollTop）{
//向下滚动代码
$（'.a'）.removeClass（'state-down'）；
$（'.a'）.removeClass（'state-partially'）；
$（'.a'）.addClass（'state-up'））
}否则{
//乱码
$（'.a'）.removeClass（'state-down'）；
$（'.a'）.removeClass（'state-up'）；
$（'.a'）.addClass（'部分状态'）
}
}否则{
$（'.a'）.removeClass（'state-up'）；
$（'.a'）.removeClass（'state-partially'）；
$（'.a'）.addClass（'state-down'））
}
lastScrollTop=st；
});
正文{
高度：2000px；
}
.a{
高度：300px；
宽度：300px；
显示：块；
背景颜色：绿色；
位置：固定；
}
.陈述{
顶部：0px；
}
.部分陈述{
顶部：-150px；
}
.陈述{
顶部：-300px；
}

A.
这很好用！然而，我在应用它时遇到了一些问题。当它使用
if（st>0）
时，它是有缺陷的，因为当我到达顶部时，标题不会回到视图中，除非我向下滚动一次。相反，我使用的是
if（st>navbarHeight）
，它从
var navbarHeight=$（“#header”）.outerHeight（true）获取其值。这工作得更好，但因为该值超过了0，所以在滚动超过
#header
的高度之前，该行为不会生效。有什么想法吗？你的网站有很多CSS和JS，不幸的是我无法找到是什么JS导致了这个问题。您可以尝试使用任意数字的黑客解决方案，例如
if（st>5）
。是的，对不起，忘了指出哪个文件可能有用；看看header-scroller.js。我尝试了一个较低（1，5）的数字，但没有多大帮助。只有当它接近
#header
的高度时，它才能正常工作。继续并将此标记为答案。实际上，这是正确的做法。在我的例子中，有点起伏，但我总结说这是其他因素的结果。