如果是Jquery / Javascript的声明

时间:2010-01-20 18:07:20

标签: javascript jquery

这就是我想要实现的目标:

我有一个div,根据滚动位置在固定和绝对定位之间切换。我有一个有效的例子,但我注意到它有点慢,因为它不断改变滚动的每个像素的位置。所以我认为添加一个额外的if语句(作为一种on和off开关)会稍微补救一下。但当然它破了。

我很少使用jquery / javascript所以对我来说这似乎是对的,但它不是......任何帮助?也许甚至比if语句更好的方法。

var top = blah;
var bottom = blah;
var ison=0;
$(window).scroll(function (event) {
    var y = $(this).scrollTop();
    if (y >= top && y <= bottom) {
        if (ison===0) {
            $('#float-contain').addClass('fixed');
            var ison = 1;
        }
    } else {
        if (ison===1) {
            $('#float-contain').removeClass('fixed');
            var ison = 0;
        }
    }
});

4 个答案:

答案 0 :(得分:2)

尝试删除每个if语句中的“var”,如下所示:

if (y >= top && y <= bottom) {
    if (ison===0) {
        $('#float-contain').addClass('fixed');
        ison = 1;
    }
} else {
    if (ison===1) {
        $('#float-contain').removeClass('fixed');
        ison = 0;
    }
}

你已经在全球范围内宣布var ison。通过在函数内重新声明变量,您将创建它的新本地实例,这会导致一些不良结果。我不确定这是否只是你的问题,但它肯定是它的一部分。

顺便说一下,这是一个很好的overview of global and local variable in Javascript。它们甚至包括一个同名的全局和局部变量的例子(我试图避免)。

答案 1 :(得分:0)

最有可能的问题是,当你尝试访问它时,ison的值总是未定义的,因为你是在函数内定义它,但只是在尝试读取它之后。

每当你在一个函数内部定义一个变量时,即使它在代码的后面没有被声明,它也会自动覆盖在作用域之外具有相同名称的任何变量 - 因此在函数内部,ison的值是未定义的,直到它为止。由于你的if子句,代码永远不会达到。

尝试从函数内部的var ison = n语句中删除var,这可能有所帮助。这将使它访问您在全局范围内声明的变量。

答案 2 :(得分:0)

下面,

    if (ison===0) {
        $('#float-contain').addClass('fixed');
        var ison = 1;
    }

删除var,因为您正在使用它重新声明ison。 (对另一个分支也这样做。)

答案 3 :(得分:0)

我认为缓慢是由于document.getElementById引起的重复$('#float-contain')次呼叫造成的。您可以缓存jQuery对象,这样就不会这样做。如果元素已经/没有类,则addClass/removeClass/toggleClass不会执行任何操作。

这应该可以正常工作:

var top = blah;
var bottom = blah;
var $elem = $('#float-contain');
$(window).scroll(function (event) {
    var y = $(this).scrollTop();
    $elem.toggleClass('fixed', (y >= top && y <= bottom));
});

您还可以在用户完成滚动而不是连续运行时运行此代码,或者您可以“限制”它仅运行一次100毫秒。这是实现第一种技术的方法 - http://www.matts411.com/post/delaying_javascript_event_execution/