7

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());
});
4

3 に答える 3

11

混乱は、「on（）」がどのように機能するかにあります。jQueryで$（document）.on（xx、 "#popup"、yy）と言うと、xxイベントがドキュメントに到達するたびにyyyを実行しようとしますが、元のターゲットは"#popup"でした。

ドキュメントがxxイベントを取得していない場合、それはそれがバブリングしていないことを意味します！詳細はjQueryOnのドキュメントに記載されていますが、「load」、「error」、「scroll」の3つのイベントはDOMをバブルしません。

これは、イベントを受信する要素に直接イベントをアタッチする必要があることを意味します。$（ "＃popup"）。on（xx、yy）;

于 2012-12-28T18:19:39.357 に答える
6

イベントは単に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()); 
});
于 2012-05-16T19:11:13.617 に答える
2

@ Venar303 が言うように、スクロールはバブリングしないため、ドキュメントへのバインドは機能しません。

これを使って：

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

これの代わりに：

$(document).on('scroll', '#popup', function() {});
于 2013-03-13T05:47:05.907 に答える