function menuStickyWhenScrollUp () {
var menuHeader = $('.menu-header-sticky');
var menuTransparent = $('.menu-header-transparent');
var checkpoint = menuHeader.data('responsive');
var windowWidth = $(window).innerWidth();
var position = 0;
console.log(windowWidth);
/* normal */
if(checkpoint <= windowWidth) {
$(window).scroll(function(event) {
var currentPos = $(this).scrollTop();
// on top
if (currentPos === 0 ) {
console.log('on top');
menuHeader.removeClass('menu-header-fixed header-fixed-unpin header-fixed-pin');
if(menuHeader.hasClass('menu-anchor')) {
menuHeader.removeClass('menu-header-dark');
}
}
// scroll down
if (currentPos > position && currentPos > 300) {
console.log('on scroll down');
checkRemoveClass(menuHeader, 'header-fixed-pin');
checkAddClass(menuHeader, 'header-fixed-unpin');
if(menuHeader.hasClass('menu-anchor')) {
menuHeader.removeClass('menu-header-dark');
}
}
// scroll up
else {
if(currentPos > 300) {
console.log('on scroll up');
checkAddClass(menuHeader, 'menu-header-fixed header-fixed-pin');
checkAddClass(menuTransparent, 'menu-header-fixed header-fixed-pin');
if(menuHeader.hasClass('menu-anchor')) {
menuHeader.addClass('menu-header-dark');
}
}
}
position = currentPos;
});
}
/* responsive mode */
else {
}
}
Menu sticky when scroll up (desktop only).
Just for fun...
Just for fun...
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.