制作导航栏到页面顶部

-2

所以我不知道JavaScript，我想我会在这里需要它。当你向下滚动页面时，有人可以帮助我将页面顶部的导航栏显示在页面上吗？制作导航栏到页面顶部

.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; 
 
}

<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>

来源

2017-06-12 Aleksander Ranum

_I不知道javascript_好事，因为你不需要它为这个！查看称为['position']（https://www.w3schools.com/cssref/pr_class_position.asp）的CSS属性，您需要的值是'fixed' – George

您可以参考本教程; https://www.w3schools.com/howto/howto_css_fixed_menu.asp – NeptuneZ

您需要添加position: fixed并给予一定padding-top为相同nav到身体的height：

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; 
 
}

<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>

来源

2017-06-12 14:12:20

您只需设置一个position: fixed为您导航栏

.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; 
 
}

<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>

来源

2017-06-12 14:12:21

制作导航栏到页面顶部

回答

相关问题