108 lines
3.7 KiB
JavaScript
108 lines
3.7 KiB
JavaScript
/**
|
||
* 相宜亲家官网 - 主脚本
|
||
*/
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 导航栏滚动效果
|
||
const header = document.querySelector('.header');
|
||
const navLinks = document.querySelectorAll('.nav a');
|
||
const heroSection = document.querySelector('.hero');
|
||
|
||
// 滚动时改变导航栏样式
|
||
window.addEventListener('scroll', function() {
|
||
const heroHeight = heroSection ? heroSection.offsetHeight : 600;
|
||
|
||
if (window.scrollY > heroHeight - 100) {
|
||
header.classList.add('header-fixed');
|
||
} else {
|
||
header.classList.remove('header-fixed');
|
||
}
|
||
|
||
// 更新导航栏激活状态
|
||
updateActiveNav();
|
||
});
|
||
|
||
// 平滑滚动到锚点
|
||
navLinks.forEach(link => {
|
||
link.addEventListener('click', function(e) {
|
||
const targetId = this.getAttribute('href');
|
||
|
||
// 只对锚点链接（以#开头）进行平滑滚动处理
|
||
if (targetId.startsWith('#')) {
|
||
e.preventDefault();
|
||
const targetSection = document.querySelector(targetId);
|
||
|
||
if (targetSection) {
|
||
const headerHeight = header.offsetHeight;
|
||
const targetPosition = targetSection.offsetTop - headerHeight;
|
||
|
||
window.scrollTo({
|
||
top: targetPosition,
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
}
|
||
// 对于外部链接（如cases.html），让浏览器正常处理跳转
|
||
});
|
||
});
|
||
|
||
// 更新导航栏激活状态
|
||
function updateActiveNav() {
|
||
const sections = document.querySelectorAll('section[id]');
|
||
const scrollPosition = window.scrollY + 100;
|
||
|
||
sections.forEach(section => {
|
||
const sectionTop = section.offsetTop - 100;
|
||
const sectionHeight = section.offsetHeight;
|
||
const sectionId = section.getAttribute('id');
|
||
|
||
if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
|
||
navLinks.forEach(link => {
|
||
const href = link.getAttribute('href');
|
||
// 只处理锚点链接的激活状态
|
||
if (href.startsWith('#')) {
|
||
link.classList.remove('active');
|
||
if (href === '#' + sectionId) {
|
||
link.classList.add('active');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
// 案例卡片动画
|
||
const caseItems = document.querySelectorAll('.case-item');
|
||
|
||
const observerOptions = {
|
||
threshold: 0.2,
|
||
rootMargin: '0px 0px -50px 0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver(function(entries) {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.style.opacity = '1';
|
||
entry.target.style.transform = 'translateY(0)';
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
caseItems.forEach((item, index) => {
|
||
item.style.opacity = '0';
|
||
item.style.transform = 'translateY(30px)';
|
||
item.style.transition = `all 0.5s ease ${index * 0.1}s`;
|
||
observer.observe(item);
|
||
});
|
||
|
||
// 特性项动画
|
||
const featureItems = document.querySelectorAll('.feature-item');
|
||
|
||
featureItems.forEach((item, index) => {
|
||
item.style.opacity = '0';
|
||
item.style.transform = 'translateX(-30px)';
|
||
item.style.transition = `all 0.5s ease ${index * 0.15}s`;
|
||
observer.observe(item);
|
||
});
|
||
});
|