29th Sta.

kaneshin's output

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

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

Coffeegram - coffee time

このサイトで使ってるんですが、写真を見ているときにその存在するという意識を少し和らげてくれますよね。

それをするには scroll されて、現在の位置を取得すればよいですね。

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

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

$(selector).scroll(function() {
  // procedure
});

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

if ($(this).scrollTop() > 0) {
  // top position now!!
} else {
  // Not top position now!!
}