新增丰潇网站

fengxiao/js/header.js

@@ -0,0 +1,57 @@
+document.addEventListener('DOMContentLoaded', function () {
+    /** 主营业务下拉菜单与遮罩层交互 */
+    const dropdown = document.querySelector('.nav-dropdown');
+    const mask = document.querySelector('.dropdown-mask');
+    const navLink = dropdown?.querySelector('.nav-link');
+
+    if (dropdown || mask || navLink) {
+        const handleToggleDropdown = (e) => {
+            e.preventDefault();
+            const isOpen = dropdown.classList.contains('open');
+            if (isOpen) {
+                dropdown.classList.remove('open');
+                dropdown.setAttribute('aria-expanded', 'false');
+                mask.classList.remove('active');
+            } else {
+                dropdown.classList.add('open');
+                dropdown.setAttribute('aria-expanded', 'true');
+                mask.classList.add('active');
+            }
+        };
+
+        const handleCloseDropdown = () => {
+            dropdown.classList.remove('open');
+            dropdown.setAttribute('aria-expanded', 'false');
+            mask.classList.remove('active');
+        };
+
+        // 点击"主营业务"切换下拉
+        navLink.addEventListener('click', handleToggleDropdown);
+
+        // 遮罩层点击关闭
+        mask.addEventListener('click', handleCloseDropdown);
+
+        // 键盘无障碍支持（Enter/Space）
+        dropdown.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                handleToggleDropdown(e);
+            }
+            if (e.key === 'Escape') {
+                handleCloseDropdown();
+            }
+        });
+    }
+
+});
+
+
+window.addEventListener('scroll', () => {
+    const header = document.querySelector('.header');
+    if (!header) return;
+    if (window.scrollY > 10) {
+      header.classList.add('scrolled');
+    } else {
+      header.classList.remove('scrolled');
+    }
+  });