画像が表示されているときに何かが発生するようにコードを作成し、画像が表示されていないときにカウンターをリセットして、画像が表示に戻ったときに同じことが再び発生するようにします。
画像が表示されたときに何かを実行するようにコードを機能させていますが、画像が表示されていないときにカウンターをリセットするコードを追加すると、すべてが機能しなくなります。
html:
<div style="height: 2000px">
<img height="320px" width= "240px" id="pbr" src="http://i47.tinypic.com/33bztj8.jpg" alt="image 1">
<img height="320px" width= "240px" id="pbrglow" src="http://i48.tinypic.com/2ykduvl.jpg" alt="image 2">
<button id="button">click to reset</button>
</div>
css:
#pbr {
position: absolute;
top: 500px;
z-index: 0;
}
#pbrglow {
position: absolute;
display: none;
top: 500px;
z-index: 1;
}
#button {
position: absolute;
top: 850px;
z-index: 3;
}
javascript:
var y = $("#pbr").offset().top;
var eventsFired = 0;
$(window).scroll(function() {
var y = $("#pbr").offset().top;
var scrollY = $(window).scrollTop();
if (scrollY + 100 > y && eventsFired == 0) {
eventsFired++;
alert(eventsFired);
}
});
$("#button").on("click", function() {
var scrollYY = $(window).offsetTop();
if (eventsFired == 1) {
alert("happened");
eventsFired = 0;
}
}
これがコード付きのjsfiddleです
$( "#button")で始まるコードを削除すると...コードは機能しますが、これをコードに含めると機能しません。
PSこれは私がiOSで作業する必要があるウェブサイトです。