javascript - 要素が特定の位置を通過したときに CSS プロパティを変更する

Question

私のページには、暗い画像の上にあるヘッダーが含まれています。画像は、ブラウザからのビューポートとまったく同じサイズです。

私の目標は、ページを下にスクロールしてヘッダーが画像を完全に通過すると、ヘッダーの背景色が変わることです。

それは可能ですか？

ありがとう

Answer 1

フィドルを見てください

$(function() {

  var image  = $('.image'),
      winHgt = $(window).innerHeight();

  image.css({ height: winHgt });


  $(window).scroll(function() {

    var header  = $('#header'),
        winHgt  = $(window).innerHeight();

    if ($(window).scrollTop() > winHgt) { 
      $('#header').css({ background: '#333' });
    }
    else if ($(window).scrollTop() < winHgt) { 
      $('#header').css({ background: '#888' });
    }

  });

});