109 lines
3.9 KiB
JavaScript
109 lines
3.9 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
||
const navContainer = document.getElementById('nav-container');
|
||
if (!navContainer) return;
|
||
|
||
// ----- 1. Создание структуры меню (как было) -----
|
||
const mainMenu = [
|
||
{ href: '/demontazh', title: 'Демонтаж и капремонт трубопроводов' },
|
||
{ href: '/ustranenie', title: 'Устранение дефектов (КМТ)' }
|
||
];
|
||
|
||
const extraMenu = [
|
||
{ href: '/personnel', title: 'Аттестованный персонал' },
|
||
{ href: '/fleet', title: 'Парк техники (не старше 5 лет)' },
|
||
{ href: '/certificates', title: 'ИСО 9001, OHSAS 18001, ИСО 14001' },
|
||
{ href: '/license', title: 'Лицензия СРО' },
|
||
{ href: '/waste-license', title: 'Лицензия на отходы I–IV класса' },
|
||
{ href: '/scrap-license', title: 'Лицензия на лом чёрных и цветных металлов' }
|
||
];
|
||
|
||
const currentPath = window.location.pathname;
|
||
const isActive = (href) => {
|
||
if (href === '/' && currentPath === '/') return true;
|
||
if (href !== '/' && currentPath.startsWith(href)) return true;
|
||
return false;
|
||
};
|
||
|
||
const nav = document.createElement('nav');
|
||
nav.className = 'main-nav';
|
||
|
||
const ul = document.createElement('ul');
|
||
ul.className = 'nav-buttons';
|
||
mainMenu.forEach(item => {
|
||
const li = document.createElement('li');
|
||
const a = document.createElement('a');
|
||
a.href = item.href;
|
||
a.textContent = item.title;
|
||
if (isActive(item.href)) a.classList.add('active');
|
||
li.appendChild(a);
|
||
ul.appendChild(li);
|
||
});
|
||
nav.appendChild(ul);
|
||
|
||
const extraDiv = document.createElement('div');
|
||
extraDiv.className = 'extra-nav';
|
||
const extraTitle = document.createElement('div');
|
||
extraTitle.className = 'extra-title';
|
||
extraTitle.textContent = 'Наши преимущества, сертификаты и лицензии:';
|
||
extraDiv.appendChild(extraTitle);
|
||
const extraButtons = document.createElement('div');
|
||
extraButtons.className = 'extra-buttons';
|
||
extraMenu.forEach(item => {
|
||
const a = document.createElement('a');
|
||
a.href = item.href;
|
||
a.textContent = item.title;
|
||
a.className = 'extra-btn';
|
||
extraButtons.appendChild(a);
|
||
});
|
||
extraDiv.appendChild(extraButtons);
|
||
nav.appendChild(extraDiv);
|
||
navContainer.appendChild(nav);
|
||
|
||
// ----- 2. Стили для плавного скрытия всего контейнера -----
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
#nav-container {
|
||
transition: opacity 0.3s ease, visibility 0.3s ease, padding 0.3s ease, margin 0.3s ease;
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
#nav-container.hidden-nav {
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
height: 0 !important;
|
||
overflow: hidden;
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
|
||
// ----- 3. Логика: скрываем при скролле вниз, показываем только в самом верху -----
|
||
let lastScrollY = window.scrollY;
|
||
let ticking = false;
|
||
|
||
const handleScroll = () => {
|
||
const currentScrollY = window.scrollY;
|
||
const direction = currentScrollY > lastScrollY ? 'down' : 'up';
|
||
|
||
if (direction === 'down') {
|
||
// При движении вниз — скрываем навигацию
|
||
navContainer.classList.add('hidden-nav');
|
||
} else if (direction === 'up') {
|
||
// При движении вверх — показываем только если мы в самом верху
|
||
if (currentScrollY === 0) {
|
||
navContainer.classList.remove('hidden-nav');
|
||
}
|
||
}
|
||
|
||
lastScrollY = currentScrollY;
|
||
ticking = false;
|
||
};
|
||
|
||
window.addEventListener('scroll', () => {
|
||
if (!ticking) {
|
||
requestAnimationFrame(handleScroll);
|
||
ticking = true;
|
||
}
|
||
});
|
||
}); |