顶部导航开始不显示 等页面滑到主导航栏，这个新顶部导航栏滑动下拉显示，并且改为固定定位 等页面滑到上面，新顶部导航栏隐藏

你可以通过监听页面滚动事件来实现这个效果。当页面滚动到一定位置时，添加一个类名到顶部导航栏元素，该类名包含样式规则来实现固定定位和显示。当页面滚动到上面时，移除该类名以隐藏顶部导航栏。

以下是一个简单的示例代码：

// 获取顶部导航栏元素
const navbar = document.querySelector('.navbar');

// 监听页面滚动事件
window.addEventListener('scroll', function() {
  // 获取页面滚动距离
  const scrollY = window.pageYOffset;

  // 判断页面滚动位置，添加或移除类名
  if (scrollY >= 200) {
    navbar.classList.add('fixed-nav');
  } else {
    navbar.classList.remove('fixed-nav');
  }
});

在上面的代码中，我们假设顶部导航栏的类名为 `.navbar`，并且添加了一个类名 `.fixed-nav` 来设置固定定位和显示。你可以根据你的实际情况修改这些类名和滚动位置的阈值。

另外，你需要在 CSS 中定义 `.fixed-nav` 类的样式规则，例如：

.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  /* 其他样式规则 */
}

记得将以上代码适配到你的项目中，并根据实际需求进行调整。希望对你有帮助！如有更多问题，请随时提问。