在JQuery / Javascript中触发“调整大小”事件时，如何更新在“滚动”事件中使用的某些全局变量？

Question

我有一些全局声明的变量：

var a = $('.ela');
var b = $('.elb');
var top_a = $('.ela').offset().top;
var top_b = $('.elb').offset().top;

我在应用于<main>元素的“ scroll”事件上使用了这些变量：

$('main').on('scroll', function(top_a, top_b) {
// do something with top_a and top_b
}

现在，我需要在事件$（window）.resize（）上使用这些变量的更新值，所以我这样写：

$(window).resize(function() {
   top_a = $('.ela').offset().top;
   top_b = $('.elb').offset().top;
}) 

这种方式全局变量被更新，但是在$（'main'）。on（'scroll'，function etc）中，我得到了旧值...

我在哪里做错了？

Answer 1

您没有将变量传递给scroll事件

$('main').on('scroll', function(top_a, top_b) {
// do something with top_a and top_b
})

top_a将引用event对象，而不是top_a变量。

您可以使用event.data传递变量

$('main').on('scroll', {top_a:top_a, top_b:top_b}, function(event) {
   // do something with top_a and top_b
   console.log(event.data.top_a, event.data.top_b)
});

或者，直接通过引用变量

$('main').on('scroll', function(event) {
   // do something with top_a and top_b
   console.log(top_a, top_b)
});