导航滚动到一定高度固定到顶部 js代码(jquery)

要实现当导航滚动到一定高度时固定在顶部，可以使用jQuery监听滚动事件，并根据页面的滚动位置来切换固定与否的类。以下是一个简单的示例代码：

HTML:

<nav id="navbar">Navbar</nav>
<!-- 页面内容 -->

CSS:

#navbar {
  position: fixed; /* 默认固定定位，开始时不显示 */
  top: -60px; /* 初始位置在导航上方 */
  transition: top 0.3s; /* 平滑过渡效果 */
  width: 100%;
  background-color: #333;
  color: white;
  padding: 10px 0;
  text-align: center;
}
 
.fixed {
  top: 0; /* 固定在顶部 */
}

jQuery:

$(window).on('scroll', function() {
  var scrollTop = $(window).scrollTop(); // 获取滚动高度
  var navOffset = $('#navbar').offset().top; // 获取导航的位置
  if (scrollTop >= navOffset) { // 当滚动到一定位置
    $('#navbar').addClass('fixed'); // 添加固定类
  } else {
    $('#navbar').removeClass('fixed'); // 移除固定类
  }
});

确保在使用这段代码之前，页面已经加载了jQuery库。