at kaneshin

Free space for me.

JavaScript (jQuery) で動的にイベントの処理を追加する方法

基本的に要素へイベントの処理を追加する場合は

$('#foo').bind('click', function() {
  // procedure
});

としますが、これは動的に生成された要素にはその処理を追加することができません。
そういうときは live メソッドを使用します

$('#foo').live('click', function() {
  // procedure
});

こうすると、動的に生成された foo セレクターにも click の処理が追加することが可能になります。

画面をスクロールしたとき、要素を少し透過させる

画面をスクロールしたときに、fixedしているヘッダーやナビゲーションに対して、少し透過させるとかっこよくありません?

実装の仕方は scroll されたときの位置を取得し、それに応じて透過させるだけで良いです。



See the Pen rWXoBY by Shintaro Kaneko (@kaneshin) on CodePen.


$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
      $('header').css('opacity', 0.8);
    } else {
      $('header').css('opacity', 1);
    }
  });
});

これは、window がスクロールされたときに処理をするようにしています。

$(selector).scroll(function() {
  // Do something
});

この関数の中に、現在のTOPのスクロール位置が取得できる $(selector).scrollTop() で処理しています。

if ($(this).scrollTop() > 0) {
  // Topでないとき
} else {
  // Topのとき
}