怎么用用html/css/js实现 导航栏吸顶效果

要实现导航栏吸顶效果，可以使用CSS的"position: fixed"属性来固定导航栏在页面的顶部。在JavaScript中，可以通过监听浏览器的滚动事件来实现导航栏的吸顶效果。具体实现方式可以参考以下代码：

HTML代码

<nav class="navbar">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品介绍</a></li>
    <li><a href="#">服务支持</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS代码

.navbar {
  width: 100%;
  height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.navbar ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
  margin: 0;
}

.navbar ul li {
  list-style: none;
}

.navbar ul li a {
  text-decoration: none;
  font-size: 16px;
  color: #333;
  padding: 20px;
  transition: all .3s ease;
}

.navbar ul li a:hover {
  color: #007bff;
}

JavaScript代码

window.addEventListener('scroll', function() {
  var navbar = document.querySelector('.navbar');
  if (window.pageYOffset > 0) {
    navbar.classList.add('fixed');
  } else {
    navbar.classList.remove('fixed');
  }
});

在滚动事件中，通过获取导航栏的DOM节点，判断页面当前的滚动位置是否超过了导航栏的位置，如果超过了，就给导航栏添加一个"fixed"类，否则就将"fixed"类移除。在CSS中，可以定义"fixed"类的样式，使导航栏固定在页面的顶部。