Question

我最近添加了一个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，因为它更容易看到这个），当你向下滚动到绿色部分时，三个块已经存在。延迟和fadeIn的工作，他们只是不等到你在滚动点。但是，这适用于我的640px或更少的媒体查询，此函数imgDelaysSlide（）;.为什么scroll函数不能用于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>

Answer 1

就像我们在collab jsfiddle中讨论过的那样，当宽度超过640px时，我们只需要阻止你的函数在页面加载时触发。

if (mq.matches) {
  imgDelaysSlide();
} else {
  //imgDelays();

你可以保留兔子：D

滚动偏移功能无效

1 个答案: