Как я могу изменить заголовок на div при прокрутке?

Question

Я создам черно-белый фон сайта. Я хочу, чтобы заголовок был заменен на translateY, когда фон черный. Я хочу медленно меняться в области перехода. Как я могу это сделать?

function headerEffect() {
  var win = $(window).scrollTop();
  var blackspace = $('.black').offset().top;
  var headw = $('.logo-white');
  var headb = $('.logo-black');
  var where = window.pageYOffset || document.documentElement.scrollTop;

  if (win > blackspace) {
    headw.css({
      'transform': 'translateY(' + (win - blackspace - 42) + 'px' + ')'
    });
  }
}

headerEffect();
$(window).scroll(headerEffect);

header {
  position: fixed;
  font-size: 30px;
  font-weight: bold;
}

header .logo-white {
  color: #fff;
}

header .logo-black {
  color: #000;
}

.black {
  background: #000;
  height: 300px;
  width: 100%;
}

.white {
  background: #fff;
  height: 300px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header>
  <div class="logo-black">LOGO</div>
  <div class="logo-white">LOGO</div>
</header>

<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>

https://jsfiddle.net/br1fmhou/

Answer 1

Я пишу console.log('123'), чтобы убедиться, что вы прокручиваете в black div

function headerEffect() {
        var win = $(window).scrollTop();
        var blackspace = $('.black').offset().top;
        var headw = $('.logo-white');
        var headb = $('.logo-black');
        var where =  window.pageYOffset || document.documentElement.scrollTop;
        $('.black').each(function() {
          if (win >= ($(this).offset().top - 10) &&
            win <=  ($(this).offset().top + $(this).height())) {
            console.log('123');
                headw.css({
                'transform': 'translateY('+( win - blackspace - 42) + 'px' +')'
            });
            }
        })

       }

https://jsfiddle.net/br1fmhou/2/