Question

请在此处查看JSFiddle：http://jsfiddle.net/jL6d2qp6/

我有一个动画，它应该将#top元素保持在页面顶部的固定位置，除非#login元素在屏幕上。为了控制这个，我使用一个每10ms运行一次的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);
});

此外，如果有更好的方法来实现这一目标，我会喜欢它，因为这有点像是一种欺骗。

Answer 1

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

如果窗口中不再显示登录框，请为#top框指定一个类似 .sticky 的类，将其位置更改为position: fixed。否则删除这个课程。

结帐jsFiddle。

滚动备份时，基于滚动位置的javascript动画不会恢复为原始状态

1 个答案: