向上滚动时，基于滚动位置的 javascript 动画不会恢复到其原始状态

Scroll position based javascript animation does not revert to it's original state when scrolling back up

本文关键字：滚动 恢复 动画 状态 原始状 原始 javascript 位置 于滚动      更新时间：2023-09-26

请参阅此处的JSFiddle：http://jsfiddle.net/jL6d2qp6/

我有一个动画，它应该将 #top 元素保持在页面顶部的固定位置，除了 #login 元素在屏幕上时。为了控制这一点，我使用了一个每 10 毫秒运行一次的 javascript 函数，并为 #top 切换 css 类，当我向下滚动时，它会按预期更新，但是当我尝试向上滚动时，没有任何反应。

有问题的JavaScript代码：

offScreen = function(id, targetValue)
{
    var offset = $("#top").offset();
    var w = $(window);
    var height = $(id).innerHeight();
    var finalOffset = (offset.top + height) - w.scrollTop();
    if (finalOffset < targetValue)
    {
        return true;
    }
    else
    {
        return false;
    }
}
function updateTopMenu()
{
    if (offScreen("#login", 81) === false)
    {
        if($("#top").hasClass("top-bar-absolute") === false)
        {
            $("#top").addClass("top-bar-absolute");
            console.log("added top-bar-absolute");
        }
        if($("#top").hasClass("top-bar-fixed") === true)
        {
            $("#top").removeClass("top-bar-fixed");
            console.log("removed top-bar-fixed");
        }
    }
    if(offScreen("#login", 81) === true)
    {
        if($("#top").hasClass("top-bar-absolute") === true)
        {
            $("#top").removeClass("top-bar-absolute");
            console.log("removed top-bar-absolute");
        }
        if($("#top").hasClass("top-bar-fixed") === false)
        {
            $("#top").addClass("top-bar-fixed");
            console.log("added top-bar-fixed");
        }
    }
}
$("#top").ready( function() {
    setInterval(updateTopMenu, 10);
});

另外，如果有更好的方法来实现这一点，我会喜欢它，因为这感觉有点作弊。

实现此目的的最简单方法是侦听窗口上的滚动事件。每次用户滚动时都会调用此值。然后，您可以检查用户是否滚动过登录框，即超出登录框的高度。

如果登录框不再在窗口中，请为 #top 框分配一个类，例如 .sticky，该类将其位置更改为 position: fixed 。否则删除此类。

看看这个jsFiddle。

相关文章：