You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
(function( $ ) {
|
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
|
|
// Active header on scroll (970 Design - task 3)
|
|
|
|
|
const header = $('.header');
|
|
|
|
|
|
|
|
|
|
$(window).scroll(function() {
|
|
|
|
|
let scroll = window.pageYOffset;
|
|
|
|
|
|
|
|
|
|
if (scroll > 100) {
|
|
|
|
|
header.addClass('active');
|
|
|
|
|
} else {
|
|
|
|
|
header.removeClass('active');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Mobile navigation toggle
|
|
|
|
|
$(document).ready(function($) {
|
|
|
|
|
let toggleMobileNav = function() {
|
|
|
|
|
let menu = $('.menu'),
|
|
|
|
|
mobileNav = $('.mobile-nav'),
|
|
|
|
|
menuOpen = false;
|
|
|
|
|
|
|
|
|
|
// Check if .mobile-nav is visible
|
|
|
|
|
if (mobileNav.is(':visible')) {
|
|
|
|
|
mobileNav.click(function() {
|
|
|
|
|
if (!menuOpen) {
|
|
|
|
|
menu.slideDown();
|
|
|
|
|
menuOpen = true;
|
|
|
|
|
mobileNav.addClass('active');
|
|
|
|
|
} else {
|
|
|
|
|
menu.slideUp();
|
|
|
|
|
menuOpen = false;
|
|
|
|
|
mobileNav.removeClass('active');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$(document).click(function(event) {
|
|
|
|
|
if (!$(event.target).closest(menu).length && !$(event.target).closest(mobileNav).length && mobileNav.is(':visible')) {
|
|
|
|
|
if (menuOpen) {
|
|
|
|
|
menu.slideUp();
|
|
|
|
|
menuOpen = false;
|
|
|
|
|
mobileNav.removeClass('active');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
menu.show();
|
|
|
|
|
mobileNav.off("click");
|
|
|
|
|
$(document).off("click", "**");
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
toggleMobileNav();
|
|
|
|
|
$(window).resize(toggleMobileNav);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
})( jQuery );
|
