1
我最近添加了一個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，因爲它更容易看到這一點），當你向下滾動到綠色部分時，三個塊已經在那裏。延遲和淡入淡出的工作，他們只是不等到你在滾動點。但是，這對我的640像素或更少的媒體查詢，這個函數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>
https://jsfiddle.net/#&togetherjs=tqB1t4f33M再次 – Becky