There is a simple issue that I find difficult to explain in text, so I have created a video demonstration instead. Please watch the video at this link:
The functionality on my page works perfectly when scrolling down, as it replaces images with the next image in the series.
However, the problem arises when I stop scrolling – the image reverts back to an earlier one. I have been monitoring the value of scrollTop (which is logged in the console in my video), and it seems that at the end of scrolling (when I release my fingers from the mousepad), it returns a low value such as 0.
Why is this happening? All I want is for the image to stay in place once I lift my fingers from the scroll wheel or pad.
Below is the code snippet that I am using:
<html>
<meta charset="UTF-8">
<head>
<script type="text/javascript">
var lastScrollTop;
function mainScript(){
bgResize();
lastScrollTop = document.body.scrollTop;
window.addEventListener("scroll", bgAnimation, false);
window.addEventListener('resize', bgResize);
}
function bgAnimation(){
var currentScrollTop = document.body.scrollTop;
var currentBg = document.getElementById("pictureAnimation").src;
var currentBgNum = currentBg.substring(currentBg.length-8, currentBg.length-4);
console.log(lastScrollTop);
if(currentScrollTop > lastScrollTop){
if((currentBgNum < 0196) && (currentBgNum > 99)){
var nextBgNum = Number(currentBgNum)+1;
nextBgNum = String("0" + nextBgNum);
var nextBg = currentBg.replace(currentBgNum, nextBgNum);
document.getElementById("pictureAnimation").src = nextBg;
lastScrollTop = currentScrollTop;
}
}
else if(currentScrollTop < lastScrollTop){
if((currentBgNum < 0197) && (currentBgNum > 100)){
//decrement image number by 1
var nextBgNum = Number(currentBgNum)-1;
//update image
nextBgNum = String("0" + nextBgNum);
var nextBg = currentBg.replace(currentBgNum, nextBgNum);
document.getElementById("pictureAnimation").src = nextBg;
lastScrollTop = currentScrollTop;
}
}
}
function bgResize(){
var newWindowWidth = 0, newWindowHeight = 0;
var emcPictureHeight = 1080, emcPictureWidth = 1920;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
newWindowWidth = window.innerWidth;
newWindowHeight = window.innerHeight;
}
else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
newWindowWidth = document.documentElement.clientWidth;
newWindowHeight = document.documentElement.clientHeight;
}
else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
newWindowWidth = document.body.clientWidth;
newWindowHeight = document.body.clientHeight;
}
var scale = Math.max(newWindowWidth/emcPictureWidth, newWindowHeight/emcPictureHeight);
var width = scale * emcPictureWidth , height = scale * emcPictureHeight;
var left = (newWindowWidth-width)/2 , top = (newWindowHeight-height)/2;
var emcView = document.getElementById("emcView");
document.getElementById("emcView").style.width = width + "px";
emcView.style.height = height + "px";
emcView.style.position = "fixed";
emcView.style.left = left + "px";
emcView.style.zindex = 0;
emcView.style.top = top + "px";
//return true;
}
window.onload=function() {
mainScript();
};
</script>
<noscript>
<h3>This site requres JavaScript</h3>
</noscript>
<title> ELDP Awesomeness </title>
<style>
#emcView {
width:10px;
}
</style>
</head>
<body cz-shortcut-listen="true">
<div id ="emcView">
<image id = "pictureAnimation" src="Sequence_Pictures/Sequence0100.jpg">
</div>
</body>
</html>