Question

我试图做以下事情...... 当我开始滚动页面时，我的菜单会发生变化：

        $(window).scroll(function(){
                if( $(window).scrollTop() > 1 ) {
                        $('nav').addClass( "smaller" );
                        $('nav').removeClass( "bigger" );
                        $('nav').css({ 'position': 'fixed', 'top':0, 'left':0 });
                } else {
                        $('nav').removeClass( "smaller" );
                        $('nav').addClass( "bigger" );
                        $('nav').css('top', '32px');
                }
        });

然后我需要一个检查当前类并执行另一个操作的脚本。例如：

if ($('nav').hasClass('bigger') ) {
    var someVar = -132;
} else {
    var someVar = -153;
};

不幸的是，脚本的行为就像没有更改类一样。仍然看到第一个州。

你能做些什么？如何在＆＃34;实时＆＃34;？

中查看课程

Answer 1

你真的不能。这需要经常嗅探并且会耗费资源。正确的方法是在原始（滚动）函数上使用回调：

$(window).scroll(function () {
    if ($(window).scrollTop() > 1) {
        $('nav').addClass("smaller");
        $('nav').removeClass("bigger");
        $('nav').css({
            'position': 'fixed',
            'top': 0,
            'left': 0
        });

        someOtherFunction();
    } ...
});

此外，您可以通过链接来简化代码：

$('nav').addClass("smaller").removeClass("bigger").css({
    ...
});

Answer 2

您的概念类似于DOM突变事件的基础。但是，由于一个原因，这个功能并没有在浏览器中广泛实现 - 跟踪每个DOM节点是非常耗费资源的。这正是DOM突变事件officially deprecated的原因。

不是考虑在每个单个实例（每秒帧数，也许是？）中评估类条件，而是可以决定在添加或删除类时要做什么，所有这些都内置在window对象的scroll事件中。还记得你可以链接jQuery方法：

$(window).scroll(function(){
    if( $(window).scrollTop() > 1 ) {
        $('nav').addClass( "smaller" ).removeClass( "bigger" ).css({ 'position': 'fixed', 'top':0, 'left':0 });
        var someVar = -153;
    } else {
        $('nav').removeClass( "smaller" ).addClass( "bigger" ).css('top', '32px');
        var someVar = -132;
    }
});

如果您担心由于在用户互动期间不断触发滚动事件而导致性能问题，您可能需要查看throttling it。

检查＆＃34;实时＆＃34;中的当前班级在jQuery中

2 个答案: