这就是我想要实现的目标:
我有一个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;
}
}
});
答案 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/