Question

当我向下滚动页面时，为什么导航器不会粘在顶部？这个方法过去常常对我有用，现在错了吗？这里有什么我想念的吗？

我正在做一个代码相同的另一个项目，似乎工作得很好......

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <header></header>
    <nav>

      <ul>

        <li><a href="">Section 1</a></li>
        <li><a href="">Section 2</a></li>
        <li><a href="">Section 3</a></li>

      </ul>

    </nav>

  <div id="content">

    <div id="section_1">Section 1</div>
    <div id="section_2">Section 2</div>
    <div id="section_3">Section 3</div>

  </div>

  <footer></footer>

</body>
</html>

SASS

*
  margin: 0

nav
  position: absolute
  top: 0
  width: 100%
  z-index: 1
  background-color: brown
  padding: 40px
  li
    display: inline-block
    a
      color: white
      font-size: 1.5em
      padding: 10px
      &:hover
        color: tomato

#content
  padding-top: 80px

#section_1
  background-color: grey
  color: white
  height: 500px

#section_2
  background-color: lightgrey
  color: white
  height: 500px

#section_3
  background-color: grey
  color: white
  height: 500px

footer
  background-color: tomato
  height: 140px
  width: 100%

Answer 1

您需要position: fixed使用nav将position: absolute放置在相对于窗口/视图端口的位置，并在向下滚动时粘到顶部。

position: relative只会在没有找到该属性的元素的情况下将其放置在具有body或* { margin: 0; } nav { position: fixed; /* Modify */ top: 0; width: 100%; z-index: 1; background-color: brown; padding: 40px; } nav li { display: inline-block; } nav li a { color: white; font-size: 1.5em; padding: 10px; } nav li a:hover { color: tomato; } #content { padding-top: 80px; } #section_1 { background-color: grey; color: white; height: 500px; } #section_2 { background-color: lightgrey; color: white; height: 500px; } #section_3 { background-color: grey; color: white; height: 500px; } footer { background-color: tomato; height: 140px; width: 100%; }的父容器中。

Codepen Demo

修改后的输出：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>

  <header></header>
  <nav>

    <ul>

      <li><a href="">Section 1</a>
      </li>
      <li><a href="">Section 2</a>
      </li>
      <li><a href="">Section 3</a>
      </li>

    </ul>

  </nav>

  <div id="content">

    <div id="section_1">Section 1</div>
    <div id="section_2">Section 2</div>
    <div id="section_3">Section 3</div>

  </div>

  <footer></footer>

</body>

</html>

＆＃13;

{{1}}

＆＃13;

Answer 2

＆＃34;坚持顶部＆＃34; 表示您需要将nav设为position:fixed而不是position:absolute;

为什么标题不会贴在绝对位置的顶部？

2 个答案: