Question

我正在尝试创建一个在滚动页面时不会移动的静态标题（在HTML下面）。

<header id="header">

<div class="nav-menu" id="mynav">
  <div id="nav-menu-container">
    <ul>
      <li class="menu-active">home</li>
      <li><a href="blog.html">blog</a></li>
      <li><a href="books.html">books</a></li>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
    </ul>
  </div>
</div>

<div id="scene">
  <div id="animation"></div>

</div>
  </header>

<main>
</main>

我尝试添加以下CSS。这使得标题是静态的，但是，它将它推到浏览器的左上角。因此，主标记内的内容从浏览器的顶部中间开始。

#header{
position: fixed;
top: 0;
z-index:1;}

喜欢这样：

|部首||主|

代替：

|部首|

|主要|

的jsfiddle https://jsfiddle.net/dy8gaL4j/1/

如何使标题保持在顶部（主标记上方），同时也是静态的 - 只有主要内容才会滚动。

由于

Answer 1

我希望我理解你想要的东西，所以如果这不是正确的解决方案，请告诉我。我想你想要固定的全宽标题与可滚动的身体波纹管。我会尝试添加左右参数并将它们设置为0，然后将体内内容稍微放置一下（您必须调整margin-top值）。这是我的例子

#header{
position: fixed;
left: 0;
right: 0;
top: 0;
z-index:1;
background: #aaa;
}

main{
  margin-top: 120px;
}

<header id="header">

<div class="nav-menu" id="mynav">
  <div id="nav-menu-container">
    <ul>
      <li class="menu-active">home</li>
      <li><a href="blog.html">blog</a></li>
      <li><a href="books.html">books</a></li>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
    </ul>
  </div>
</div>

<div id="scene">
  <div id="animation"></div>

</div>
  </header>

<main>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
</main>

静态标题（包括NAV和其他DIV）

1 个答案: