JavaScript 实现滚动顶部悬浮效果

以下是一个简单的 JavaScript 代码示例，可以实现滚动顶部悬浮效果：

// 获取需要悬浮的元素
var nav = document.getElementById('nav');

// 获取需要监听滚动事件的元素
var content = document.getElementById('content');

// 获取导航条距离页面顶部的距离
var navOffsetTop = nav.offsetTop;

// 监听滚动事件
content.addEventListener('scroll', function() {
  // 获取当前滚动的距离
  var scrollTop = content.scrollTop;

  // 判断是否需要悬浮导航条
  if (scrollTop >= navOffsetTop) {
    nav.classList.add('fixed'); // 添加固定定位样式
  } else {
    nav.classList.remove('fixed'); // 移除固定定位样式
  }
});

需要注意的是，这里监听的是 #content 元素的滚动事件，因此需要在该元素上设置 overflow: auto 或 overflow-y: scroll，以使其可以滚动。另外，需要在 CSS 中设置 .fixed 样式，以实现导航条的固定定位效果。