$(window).on('scroll', function(event) {
var scrollValue = $(window).scrollTop();
if (scrollValue > 70) {
$('.header_menu').addClass('fixed-top animated slideInDown');
} else{
$('.header_menu').removeClass('fixed-top animated slideInDown');
}
});
"use strict";
/*======== Doucument Ready Function =========*/
jQuery(document).ready(function () {
// slicknav
/**
* Slicknav - a Mobile Menu
*/
var $slicknav_label;
$('.responsive-menu').slicknav({
duration: 500,
easingOpen: 'easeInExpo',
easingClose: 'easeOutExpo',
closedSymbol: '',
openedSymbol: '',
prependTo: '#slicknav-mobile',
allowParentLinks: true,
label:""
});
var $slicknav_label;
$('#responsive-menu').slicknav({
duration: 500,
easingOpen: 'easeInExpo',
easingClose: 'easeOutExpo',
closedSymbol: '',
openedSymbol: '',
prependTo: '#slicknav-mobile',
allowParentLinks: true,
label:""
});
/**
* Sticky Header
*/
$(window).scroll(function(){
if( $(window).scrollTop() > 10 ){
$('.navbar').addClass('navbar-sticky-in')
} else {
$('.navbar').removeClass('navbar-sticky-in')
}
})
/**
* Main Menu Slide Down Effect
*/
var selected = $('#navbar li');
// Mouse-enter dropdown
selected.on("mouseenter", function() {
$(this).find('ul').first().stop(true, true).delay(350).slideDown(500, 'easeInOutQuad');
});
// Mouse-leave dropdown
selected.on("mouseleave", function() {
$(this).find('ul').first().stop(true, true).delay(100).slideUp(150, 'easeInOutQuad');
});
/**
* Arrow for Menu has sub-menu
*/
if ($(window).width() > 992) {
$(".navbar-arrow ul ul > li").has("ul").children("a").append("");
}
});
(function(){
var doc = document.documentElement;
var w = window;
/*
define four variables: curScroll, prevScroll, curDirection, prevDirection
*/
var curScroll;
var prevScroll = w.scrollY || doc.scrollTop;
var curDirection = 0;
var prevDirection = 0;
/*
how it works:
-------------
create a scroll event listener
create function to check scroll position on each scroll event,
compare curScroll and prevScroll values to find the scroll direction
scroll up - 1, scroll down - 2, initial - 0
then set the direction value to curDirection
compare curDirection and prevDirection
if it is different, call a function to show or hide the header
example:
step 1: user scrolls down: curDirection 2, prevDirection 0 > hide header
step 2: user scrolls down again: curDirection 2, prevDirection 2 > already hidden, do nothing
step 3: user scrolls up: curDirection 1, prevDirection 2 > show header
*/
var header = document.getElementById('header_menu');
var toggled;
var threshold = 200;
var checkScroll = function() {
curScroll = w.scrollY || doc.scrollTop;
if(curScroll > prevScroll) {
// scrolled down
curDirection = 2;
}
else {
//scrolled up
curDirection = 1;
}
if(curDirection !== prevDirection) {
toggled = toggleHeader();
}
prevScroll = curScroll;
if(toggled) {
prevDirection = curDirection;
}
};
var toggleHeader = function() {
toggled = true;
if(curDirection === 2 && curScroll > threshold) {
header.classList.add('hide');
jQuery('.sticky1').addClass('tab-sticky');
}
else if (curDirection === 1) {
header.classList.remove('hide');
jQuery('.sticky1').removeClass('tab-sticky');
}
else {
toggled = false;
}
return toggled;
};
window.addEventListener('scroll', checkScroll);
})();