滚动偏移功能不起作用

我最近添加了一个window.matchMedia函数，允许我根据不同的媒体查询运行不同的javascript函数。我遇到的问题是以下滚动功能将不再起作用：

var oTop = $('#home-img-block-section').offset().top - window.innerHeight;
 $(window).scroll(function() {
var pTop = $('body').scrollTop();
console.log(pTop + ' - ' + oTop);
if (pTop > oTop) {
  imgDelays();
  imgDelaysSlide();
}

我试过：

 if (pTop > oTop) {
  imgDelays() && imgDelaysSlide();
}

但这并没有帮助。

我在整个网站中运行相同的滚动功能，效果很好。由于某种原因，它不适用于我添加的这个新功能。您可以在代码片段中看到（我将在注释中添加一个 jsfiddle，因为它更容易看到这一点）当您向下滚动到绿色部分时，三个块已经存在。延迟和淡入的工作，他们只是不会等到你到达滚动点。但是，这确实适用于我的 640px 或更小的媒体查询，这个函数 imgDelaysSlide（）;。为什么滚动函数不适用于 imgDelays（） 函数？

$(function() {
  var oTop = $('#home-img-block-section').offset().top - window.innerHeight;
  $(window).scroll(function() {
    var pTop = $('body').scrollTop();
    console.log(pTop + ' - ' + oTop);
    if (pTop > oTop) {
      imgDelays();
      imgDelaysSlide();
    }
  });
});
function imgDelays() {
  $('.fadeBlock1').delay(300).fadeIn(500);
  $('.fadeBlock2').delay(800).fadeIn(500);
  $('.fadeBlock3').delay(1300).fadeIn(500);
}
function imgDelaysSlide() {
  $('.fadeBlock1').delay(300).animate({
    'left': '0%'
  }, 700);
  $('.fadeBlock2').delay(800).animate({
    'left': '0%'
  }, 700);
  $('.fadeBlock3').delay(1300).animate({
    'left': '0%'
  }, 700);
}
var mq = window.matchMedia('@media all and (max-width: 640px)');
if (mq.matches) {
  imgDelaysSlide();
} else {
  imgDelays();
}

#blue {
  width: 100%;
  height: 500px;
  background: blue;
}
#red {
  width: 100%;
  height: 500px;
  background: red;
}
#home-img-block-section {
  width: 100%;
  height: 500px;
  background: green;
}
.block {
  width: 33.33%;
  float: left;
  display: none;
  overflow: hidden;
  position: relative;
}
.block img {
  display: block;
  height: 100px;
  width: 100px;
  transition: all 1s ease;
}
@media screen and (max-width:640px) {
.block {
  width: 100%;
  float: left;
  display: none;
  overflow: hidden;
  cursor: pointer;
  position: relative;
left: -110%;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="blue"></div>
<div id="red"></div>
<div id="home-img-block-section">
  <div class="block fadeBlock1"><img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif"></div>
  <div class="block fadeBlock2"><img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif"></div>
  <div class="block fadeBlock3"><img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif"></div>
</div>