js导航滚动渐变

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Fade Example</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0);
    transition: background-color 0.5s;
    padding: 15px 0;
    text-align: center;
  }
  .content {
    height: 2000px;
    padding-top: 60px;
  }
</style>
</head>
<body>
<div class="navbar">My Website</div>
<div class="content">
  <!-- 页面内容 -->
</div>

<script>
window.addEventListener('scroll', function() {
  const navbar = document.querySelector('.navbar');
  let opacity = window.pageYOffset / 300;
  if (opacity > 1) opacity = 1;
  navbar.style.backgroundColor = `rgba(255, 255, 255, ${opacity})`;
});
</script>
</body>
</html>