Question

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

我正在尝试制作具有以下行为的标头;

每当用户在页面上向下滚动时，标题会获得一个CSS类（.state-up），它会将其拉起并完全隐藏。
每当用户在页面上向上滚动时，标题会获得一个CSS类（.state-partial），使其稍微退一步，部分显示一些标题（部分顶部隐藏，而某些部分则隐藏底部可见）。
当用户返回到页面的最顶部时，标题会获得一个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/ 但是，我退后一步，因为我想确保我想要应用的逻辑在最小状态下是可能的。

Answer 1

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

然后，在滚动功能结束时，将lastScrollTop设置为当前通话的st值。这样lastScrollTop将在下次调用scroll事件时可用。

这是一个有效的例子：

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 - 在向下滚动时隐藏，在向上滚动时部分显示，在顶部完全显示

1 个答案: