jquery - 如何使用 JQuery .on() 捕捉滚动事件

Question

我正在尝试使用 jQuery 中的 .on() 来捕获标签内的滚动事件。

所以这是我的解决方案：

• div id='popup'
• .fixedHeader 类是我尝试将其固定在 div 框架顶部的东西。

• getScrollTop() 是一个返回最高值的 javascript 函数（有效）

  $(document).on("scroll#popup", '#popup', function(){
     alert('scrolling');
     $(".fixedHeader").css("position", "relative");
     $(".fixedHeader").css("top", getScrollTop());
  });
  

Answer 1

困惑在于“on()”是如何工作的。在 jQuery 中，当您说 $(document).on(xx, "#popup", yy) 时，只要 xx 事件到达文档但原始目标是“#popup”，您就会尝试运行 yyy。

如果文档没有收到 xx 事件，那么这意味着它没有冒泡！详细信息在 jQuery On 文档中，但“加载”、“错误”和“滚动”三个事件不会在 DOM 中冒泡。

这意味着您需要将事件直接附加到接收它的元素上。$("#popup").on(xx,yy);

Answer 2

事件很简单scroll，没有scroll#popup。

// http://ejohn.org/blog/learning-from-twitter
// Also, be consistent with " vs '
var $fixedHeader = $('.fixedHeader').css('position', 'relative');

$(document).on('scroll', '#popup', function() {
   console.log('scrolling'); // you *really* don't want to alert in a scroll
   $fixedHeader.css("top", getScrollTop()); 
});

Answer 3

正如@ Venar303 所说，滚动不会冒泡，因此绑定到文档将不起作用。

用这个：

$('#popup').on('scroll', function() {});

而不是这个：

$(document).on('scroll', '#popup', function() {});