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

画面をスクロールしたときに、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のとき
}