使导航栏从顶部滑入视图

<nav id="navbar">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

#navbar {
  position: fixed;
  top: -100px;
  width: 100%;
  background-color: #333;
  padding: 10px;
  transition: top 0.3s ease-in-out;
}

#navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

#navbar ul li {
  margin: 0 10px;
}

#navbar ul li a {
  color: #fff;
  text-decoration: none;
}

window.addEventListener('scroll', function() {
  var navbar = document.getElementById('navbar');
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (scrollTop > 100) {
    navbar.style.top = '0';
  } else {
    navbar.style.top = '-100px';
  }
});