使导航栏粘在页面顶部

Question

所以我不知道javascript，我想我会在这里需要它。当你向下滚动页面时，是否有人可以帮助我在页面顶部显示导航栏？

＆＃13;

＆＃13;

.nav{
  list-style: none;
  text-align: center;
  padding: 20px 0 20px 0;
  margin-top: px;
}

.nav > li{
  display: inline-block;
  padding: 0 50px 0 50px;
}

.nav >li >a{
  text-decoration: none;
  color: black;
}

.nav >li > a:hover{
  color: grey;
}

＆＃13;

<ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Music</a></li>
        <li><a href="#">Hey</a></li>
        <li><a href="#">Hey</a></li>
      </ul>
      
hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要添加position: fixed并将一些padding-top与height的{​​{1}}相同：

＆＃13;

＆＃13;

nav

＆＃13;

body {
  padding-top: 75px;
}

.nav {
  list-style: none;
  text-align: center;
  padding: 20px 0 20px 0;
  margin-top: 0px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
}

.nav>li {
  display: inline-block;
  padding: 0 50px 0 50px;
}

.nav>li>a {
  text-decoration: none;
  color: black;
}

.nav>li>a:hover {
  color: grey;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

您只需为导航栏设置<ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">Music</a></li> <li><a href="#">Hey</a></li> <li><a href="#">Hey</a></li> </ul> hey<br> <br>hey<br> <br>hey<br> <br>hey<br> <br>hey<br> <br>hey<br> <br>hey<br> <br>hey<br> <br>hey<br> <br>hey<br> <br>hey<br> <br>hey<br> <br>hey<br> <br>hey<br> <br>hey<br> <br>hey<br> <br>hey<br> <br>

即可

＆＃13;

＆＃13;

position: fixed

＆＃13;

.nav{
  list-style: none;
  text-align: center;
  padding: 20px 0 20px 0;
  margin-top: px;
  position: fixed;
}

.nav > li{
  display: inline-block;
  padding: 0 50px 0 50px;
}

.nav >li >a{
  text-decoration: none;
  color: black;
}

.nav >li > a:hover{
  color: grey;
}

＆＃13;

＆＃13;

＆＃13;