如何用CSS制作仿苹果官网导航 CSS透明导航与下滑固定技巧

<header>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">关于我们</a></li>
    </ul>
  </nav>
</header>
<main>
  <!-- 页面主要内容 -->
  <section>
    <h1>欢迎</h1>
    <p>一些内容...</p>
  </section>
  </main>

header {
  position: fixed; /* 固定定位 */
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent; /* 透明背景 */
  z-index: 1000; /* 确保导航栏在最上层 */
  transition: background-color 0.3s ease; /* 平滑过渡 */
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center; /* 水平居中 */
}

nav li {
  margin: 0 20px;
}

nav a {
  text-decoration: none;
  color: white; /* 初始白色文字 */
}

window.addEventListener('scroll', function() {
  const header = document.querySelector('header');
  if (window.scrollY > 50) { // 滚动超过50px
    header.style.backgroundColor = 'rgba(255, 255, 255, 0.9)'; // 滚动后白色背景
    header.style.boxShadow = '0 2px 5px rgba(0, 0, 0, 0.2)'; // 增加阴影
    const navLinks = document.querySelectorAll('nav a');
    navLinks.forEach(link => {
      link.style.color = 'black'; // 滚动后黑色文字
    });
  } else {
    header.style.backgroundColor = 'transparent'; // 恢复透明
    header.style.boxShadow = 'none'; // 移除阴影
    const navLinks = document.querySelectorAll('nav a');
    navLinks.forEach(link => {
      link.style.color = 'white'; // 恢复白色文字
    });
  }
});

let ticking = false;

window.addEventListener('scroll', function() {
  if (!ticking) {
    window.requestAnimationFrame(function() {
      const header = document.querySelector('header');
      if (window.scrollY > 50) {
        header.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
        header.style.boxShadow = '0 2px 5px rgba(0, 0, 0, 0.2)';
        const navLinks = document.querySelectorAll('nav a');
        navLinks.forEach(link => {
          link.style.color = 'black';
        });
      } else {
        header.style.backgroundColor = 'transparent';
        header.style.boxShadow = 'none';
        const navLinks = document.querySelectorAll('nav a');
        navLinks.forEach(link => {
          link.style.color = 'white';
        });
      }
      ticking = false;
    });
    ticking = true;
  }
});

header {
  will-change: background-color, box-shadow;
}

function scrollTo(element, to, duration) {
  const start = element.scrollTop;
  const change = to - start;
  let currentTime = 0;
  const increment = 20;

  function animateScroll() {
    currentTime += increment;
    const val = Math.easeInOutQuad(currentTime, start, change, duration);
    element.scrollTop = val;
    if (currentTime < duration) {
      setTimeout(animateScroll, increment);
    }
  }

  animateScroll();
}

// 缓动函数（easeInOutQuad）
Math.easeInOutQuad = function (t, b, c, d) {
  t /= d/2;
  if (t < 1) return c/2*t*t + b;
  t--;
  return -c/2 * (t*(t-2) - 1) + b;
};

// 使用示例：
const element = document.documentElement || document.body; // 获取滚动元素
scrollTo(element, 500, 500); // 滚动到500px，持续500ms

@media (max-width: 768px) {
  nav ul {
    display: none; /* 隐藏导航链接 */
  }

  /* 添加汉堡菜单图标和样式 */
  .menu-icon {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
  }
}

const menuIcon = document.querySelector('.menu-icon');
const navUl = document.querySelector('nav ul');

menuIcon.addEventListener('click', function() {
  navUl.classList.toggle('show'); // 添加/移除 'show' 类
});

nav ul.show {
  display: block; /* 显示导航链接 */
  /* 添加其他样式，如全屏显示、背景色等 */
}