页脚在滚动时出现在页面顶部

Question

我正在使用鼠标滚动在我的joomla网页上播放视频幻灯片。但问题是，每当我做第一次滚动时，我的joomla网站的页脚就会出现。我使用的代码与this website code.类似。下面还提到了代码段。

请帮助我，以便我的页脚保留在页面底部。感谢

'use strict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

window.onload = function () {

	var vg = new videoScroller();
};

//SCROLLER

var videoScroller = function () {
	function videoScroller() {
		var _this = this;

		_classCallCheck(this, videoScroller);

		this.tick = function () {
			if (_this.inTransition) $(window).scrollTop(_this.scrollPositions[_this.currentStateIndex]);
			window.requestAnimationFrame(_this.tick);
		};

		this.sectionIntro = $('#intro');
		this.sectionMountain = $('#mountain');
		this.sectionBuilding = $('#building');
		this.sectionBeard = $('#beard');
		this.sectionFooter = $('#footer');

		this.transitionTimes = [0, 1.9, 5.02, 13.01, 14.0];
		this.scrollKeys = { 37: 1, 38: 1, 39: 1, 40: 1 };
		this.inTransition = false;
		this.playStates = {
			STATE_INTRO: "STATE_INTRO",
			STATE_MOUNTAIN: "STATE_MOUNTAIN",
			STATE_ARC: "STATE_ARC",
			STATE_BEARD: "STATE_BEARD",
			STATE_FADEOUT: "STATE_FADEOUT" };
		this.stateIndex = [this.playStates.STATE_INTRO, this.playStates.STATE_MOUNTAIN, this.playStates.STATE_ARC, this.playStates.STATE_BEARD, this.playStates.STATE_FADEOUT];
		this.windowHeight = window.innerHeight;
		this.currentScrollDirection = 1;
		this.setBodyHeight();

		this.scrollPositions = this.getScrollPositions();
		console.log(this.scrollPositions);
		this.videoElement = document.getElementById('video');

		$(window).on('scroll', function () {
			_this.scrollHandler();
		});
		this.finished = false;
		this.currentStateIndex = 0;
		this.currentState = this.playStates[this.currentStateIndex];

		this.watching = false;
	}

	videoScroller.prototype.getScrollPositions = function getScrollPositions() {
		return [this.sectionIntro, this.sectionMountain, this.sectionBuilding, this.sectionBeard, this.sectionFooter].map(function (section) {
			return section.offset().top;
		});
	};

	videoScroller.prototype.setBodyHeight = function setBodyHeight() {
		var wh = this.windowHeight;
		$('.main').css('height', wh);
	};

	videoScroller.prototype.changeStateIndex = function changeStateIndex() {
		if (this.currentStateIndex == this.stateIndex.length) {
			return false;
		}
		this.currentStateIndex++;
	};

	videoScroller.prototype.scrollHandler = function scrollHandler() {
		if (this.inTransition || this.finished) {
			return false;
		}

		this.currentScrollDirection = $(window).scrollTop() > this.scrollPositions[this.currentStateIndex] ? 1 : -1;
		this.lockScroll();
		this.changeState();
		if (!this.watching) {
			this.watching = true;
			this.tick();
		}
	};

	videoScroller.prototype.changeState = function changeState() {
		var _this2 = this;

		this.changeStateIndex();
		$('.scroll-section, .scroll-icon').removeClass('visible');
		$('.section-navigation li').removeClass('active');
		$(window).scrollTop(this.scrollPositions[this.currentStateIndex]);
		this.inTransition = true;
		this.videoElement.addEventListener('timeupdate', function () {
			if (_this2.videoElement.currentTime > _this2.transitionTimes[_this2.currentStateIndex]) {
				_this2.videoElement.pause();
				_this2.fadeInSection(_this2.currentStateIndex);
				_this2.inTransition = false;
			}
		});
		this.videoElement.play();
	};

	videoScroller.prototype.fadeInSection = function fadeInSection(state) {
		var theState = this.playStates[this.stateIndex[state]];

		switch (theState) {
			case this.playStates.STATE_MOUNTAIN:
				this.sectionMountain.addClass('visible');
				$('.scroll-icon').addClass('visible');
				$('.section-navigation li:first-child').addClass('active');
				this.unlockScroll();
				break;
			case this.playStates.STATE_ARC:
				this.sectionBuilding.addClass('visible');
				$('.scroll-icon').addClass('visible');
				$('.section-navigation li:nth-child(2)').addClass('active');
				this.unlockScroll();
				break;
			case this.playStates.STATE_BEARD:
				this.sectionBeard.addClass('visible');
				$('.scroll-icon').addClass('visible');
				$('.section-navigation li:nth-child(3)').addClass('active');
				this.unlockScroll();
				break;
			case this.playStates.STATE_FADEOUT:
				this.sectionFooter.addClass('visible');
				$('.section-navigation li:nth-child(4)').addClass('active');
				this.finished = true;
				break;
			default:
				$('#intro').addClass('visible');
		}
	};

	videoScroller.prototype.unlockScroll = function unlockScroll() {
		if (window.removeEventListener) window.removeEventListener('DOMMouseScroll', this.preventDefault, false);
		window.onmousewheel = document.onmousewheel = null;
		window.onwheel = null;
		window.ontouchmove = null;
		document.onkeydown = null;
	};

	videoScroller.prototype.preventDefault = function preventDefault(e) {
		e = e || window.event;
		if (e.preventDefault) e.preventDefault();
		e.returnValue = false;
	};

	videoScroller.prototype.preventDefaultForScrollKeys = function preventDefaultForScrollKeys(e) {
		if (this.scrollKeys[e.keyCode]) {
			preventDefault(e);
			return false;
		}
	};

	videoScroller.prototype.lockScroll = function lockScroll() {

		if (window.addEventListener) // older FF
			window.addEventListener('DOMMouseScroll', this.preventDefault, false);
		window.onwheel = this.preventDefault; // modern standard
		window.onmousewheel = document.onmousewheel = this.preventDefault; // older browsers, IE
		window.ontouchmove = this.preventDefault; // mobile
		document.onkeydown = this.preventDefaultForScrollKeys;
	};

	return videoScroller;
}();

@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,700|Lora:400italic);
html, body {
  display: block;
  height: 100%;
  width: 100%;
}

body {
  font-family: "Work Sans", sans-serif;
  font-size: 18px;
}

h1 {
  text-transform: uppercase;
  font-size: 2.6em;
  font-family: "Work Sans", sans-serif;
}

h2 {
  font-size: 2.2em;
  font-family: "Lora", serif;
  font-style: italic;
}

em {
  font-family: "Lora", serif;
  font-style: italic;
}

.main {
  display: block;
  width: 100%;
  height: 100%;
}

nav.section-navigation {
  display: block;
  position: fixed;
  bottom: 0;
  right: 10px;
  text-align: right;
  transform-origin: 0% 0%;
  transform: translateY(-50%);
  z-index: 100;
}
nav.section-navigation li {
  position: relative;
  color: rgba(255, 255, 255, 0.5);
  transition: all .3s linear;
  padding-right: 25px;
  font-family: "Lora", serif;
  transition: all .3s linear;
  cursor: pointer;
}
nav.section-navigation li:after {
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0);
  transition: all .3s linear;
}
nav.section-navigation li.active {
  color: white;
}
nav.section-navigation li.active:after {
  border-color: white;
  background: white;
}

#videoBG {
  position: fixed;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
  z-index: -100;
}

section.scroll-section {
  width: 100%;
  height: 100%;
  color: white;
}
section.scroll-section .container {
  opacity: 0;
  transition: all 1.6s linear;
  -webkit-transition: opacity 1000 linear;
}
section.scroll-section.visible .container {
  opacity: 1;
}

.vertical-center {
  min-height: 100%;
  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh;
  /* These two lines are counted as one :-)       */
  display: flex;
  align-items: center;
}

.vid-mask {
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 1;
  background: rgba(0, 0, 0, 0.3);
  opacity: 1;
  transition: opacity 1s linear;
}

.scroll-icon {
  display: block;
  position: fixed;
  bottom: 150px;
  z-index: 10;
  left: 50%;
  height: 60px;
  width: 40px;
  border: 2px solid white;
  border-radius: 16px;
  transform: translateX(-50%);
  transition: opacity 0.3s linear .5s;
  opacity: 0;
}
.scroll-icon:before {
  display: block;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: 4px;
  height: 10px;
  border-radius: 20%;
  background: white;
  animation: bouncey 1s linear infinite;
}
.scroll-icon:after {
  display: block;
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100px;
  font-size: 0.8em;
  content: "scroll down";
  color: white;
}
.scroll-icon.visible {
  opacity: 1;
}

@keyframes bouncey {
  0% {
    box-shadow: none;
    top: 10px;
  }
  50% {
    box-shadow: 0 -10px 0px rgba(100, 100, 100, 0.5);
    top: 20px;
  }
  100% {
    top: 20px;
  }
}

<div class="main">
	<div id="videoBG">
		<video id="video" muted>
			<source src="http://ericbrewer.ca/demoH.mp4" type="video/mp4">					 
		</video>
		<div class="vid-mask"></div>
		<div class="scroll-icon visible"></div>
	</div>
	<nav class="section-navigation">
		<ul>
			<li data-section="#mountains">Mountains</li>
			<li data-section="#building">Arch</li>
			<li data-section="#beard">BeardCup</li>
			<li data-section="#footer">Fin</li>
		</ul>
	</nav>
	<section id="intro" class="scroll-section vertical-center text-center visible">
		<div class="container">
			<h1>Sectional Video Transitions</h1>
		</div>
	</section>
	<section id="mountain" class="scroll-section vertical-center text-center">
		<div class="container">
			<h2>Graven images of long-departed gods,</h2>
			<p> Praesent semper iaculis sapien vitae blandit. Pellentesque quam tortor, gravida ut porta et, lobortis eget erat.</p>
		</div>
	</section>
	<section id="building" class="scroll-section vertical-center">
		<div class="container">
			<div class="col-sm-7">
				<h2>Dry spiritless leaves:</h2>
				<p>Morbi in porttitor diam, vel consequat metus. Praesent consequat mi at erat aliquam interdum. </p>
			</div>
		</div>
	</section>
	<section id="beard" class="scroll-section vertical-center text-center">
		<div class="container">
			<h2>companions of the temple porch</h2>
			<p>Ut nisi felis, dapibus ultricies libero non, dictum rhoncus ex.</p>
		</div>
	</section>
	<section id="footer" class="scroll-section  vertical-center text-center">
		<div class="container">
			<h3>Matsuo Basho</h3>
			<p><em>loose translation by Michael R. Burch</em></p>
		</div>

</div>
</div>