顶部导航滚动一定距离既要固定定位 又不影响下面布局

可以使用CSS的定位属性来实现导航栏的固定定位。具体实现方式如下：

1. 给导航栏添加position: fixed;属性，使其固定在页面上方。

2. 设置导航栏的top和left属性，使其在页面上方的指定位置。

3. 设置导航栏的z-index属性，使其在页面上方。

4. 给页面主体内容添加一个padding-top属性，其值为导航栏的高度，以防止主体内容被导航栏遮挡。

示例代码如下：

HTML：

<header>
  <nav>
    <ul>
      <li><a href="#">导航1</a></li>
      <li><a href="#">导航2</a></li>
      <li><a href="#">导航3</a></li>
    </ul>
  </nav>
</header>

<main>
  <p>主体内容</p>
</main>

CSS：

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 999;
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin: 0 10px;
}

nav ul li a {
  text-decoration: none;
}

main {
  padding-top: 60px;
}