製作導航欄到頁面頂部

-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

製作導航欄到頁面頂部

回答

相關問題