58 lines
2.7 KiB
JavaScript
Executable File
58 lines
2.7 KiB
JavaScript
Executable File
$(document).ready(function(){
|
|
|
|
$('.scroll-top').hide(); // Hide the scroll-top button initially.
|
|
|
|
/*---------- Mobile-Navbar Toggler ----------*/
|
|
// Define variables to store references.
|
|
|
|
let searchBtn = document.querySelector("#search-btn"); // Search button.
|
|
let sideBar = document.querySelector('.mobile-menu'); // Mobile side menu bar.
|
|
let searchContainer = document.querySelector(".search-container"); // Search container.
|
|
let menuBar = document.querySelector(".header #menu-btn"); // Menu bar in the header.
|
|
|
|
// Open the mobile side menu bar, When the menuBar element is clicked.
|
|
menuBar.onclick = () =>{
|
|
searchContainer.classList.remove("active"); // Show the mobile side menu.
|
|
sideBar.classList.toggle('active');
|
|
menuBar.classList.toggle("fa-times");
|
|
$(".nav-link .main-nav-link").removeClass("active"); // Remove active class from main navigation links.
|
|
$(".nav-link .sub-nav-link").removeClass("active").slideUp(); // Remove active class from sub-navigation links and slide them up.
|
|
$(".nav-link .main-nav-link i").removeClass("fa-minus").addClass("fa-plus"); // Change icon to '+' for main navigation links.
|
|
}
|
|
|
|
/*--------------- Search-Toggler ---------------*/
|
|
// When the search button is clicked.
|
|
searchBtn.onclick = () => {
|
|
sideBar.classList.remove('active'); // Hide the mobile side menu
|
|
searchContainer.classList.toggle("active"); // Toggle the visibility of the search container
|
|
}
|
|
|
|
// On Load/Scroll
|
|
$(window).on('load scroll',function(){
|
|
sideBar.classList.remove('active'); // Hide the mobile side menu on load/scroll.
|
|
menuBar.classList.remove("fa-times");
|
|
searchContainer.classList.remove("active"); // Hide the search container on load/scroll.
|
|
$(".nav-link .main-nav-link").removeClass("active"); // Remove active class from main navigation links on load/scroll.
|
|
$(".nav-link .sub-nav-link").removeClass("active").slideUp(); // Remove active class from sub-navigation links and slide them up on load/scroll.
|
|
$(".nav-link .main-nav-link i").removeClass("fa-minus").addClass("fa-plus"); // Change icon to '+' for main navigation links on load/scroll.
|
|
|
|
/*--------------- Scroll-Top ---------------*/
|
|
if ($(this).scrollTop() > 100) {
|
|
$('.scroll-top').fadeIn(); // Show the scroll-to-top button when the page is scrolled down more than 100px.
|
|
} else {
|
|
$('.scroll-top').fadeOut(); // Hide the scroll-to-top button when the page is scrolled to the top.
|
|
}
|
|
|
|
/*--------------- Sticky Header ---------------*/
|
|
if($(window).scrollTop() > 68){
|
|
$('.header').addClass('active');
|
|
}else{
|
|
$('.header').removeClass('active');
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|