当div到达视区中间时，如何确定它的位置？

window.addEventListener('scroll', function() {
  var div = document.getElementById('myDiv');
  var rect = div.getBoundingClientRect();
  var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

  var viewportMiddle = scrollTop + (viewportHeight / 2);
  var divMiddle = rect.top + (rect.height / 2);

  if (divMiddle <= viewportMiddle) {
    // div在视区中间之上
    // 执行相应操作，比如改变div的样式
    div.style.backgroundColor = 'red';
  } else {
    // div在视区中间之下
    // 执行相应操作，比如添加动画效果
    div.classList.add('animate');
  }
});