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);