scripts4.js 1.6 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
// transparent navbar
var navbar = document.querySelector('.fixed-top'), scrollTimer = null,
			mouseHover = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ];
navbar.style.backfaceVisibility = 'hidden';
navbar.style.transition = 'opacity 0.5s linear 0s';
navbar.style.WebkitTransition = 'opacity 0.5s linear 0s';

function setNavbarOpacity(){
	clearTimeout(scrollTimer);
	scrollTimer = !navbar.classList.contains('HOVER') ? setTimeout(function(){
		var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
		if ( scrollTop < 120 ){
			navbar.style.opacity = 1
		} else {
			navbar.style.opacity = 0.7
		}
	},50) : function() {return false;}
}

function setNavbarOpacityOnEnter(){
	clearTimeout(scrollTimer);
	scrollTimer = setTimeout(function(){
		if (!navbar.classList.contains('HOVER')) {
			navbar.classList.add('HOVER');
			var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
			if ( scrollTop > 120 ){
				navbar.style.opacity = 1
			}
		}
	},0)
}

function setNavbarOpacityOnLeave(){
	clearTimeout(scrollTimer);
	scrollTimer = setTimeout(function(){
		if (navbar.classList.contains('HOVER')) {
			navbar.classList.remove('HOVER');
			var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
			if ( scrollTop > 120 ){
				navbar.style.opacity = 0.7
			}
		}
	},0)
}

document.addEventListener('DOMContentLoaded', setNavbarOpacity, false);
window.addEventListener('scroll', setNavbarOpacity, false);
navbar.addEventListener(mouseHover[0],setNavbarOpacityOnEnter,false);
navbar.addEventListener(mouseHover[1],setNavbarOpacityOnLeave,false);