Как сделать навигационную панель фиксированной сверху на прокрутке

Question

Это мой fiddle Я видел несколько тем на этом сайте, чтобы это произошло, но я делаю некоторые ошибки при применении. Кто-нибудь может мне помочь.

Я хочу, чтобы панель навигации была зафиксирована сверху на свитке.

body { 
 
width: 100%; 
 
height: 100%; 
 
margin:0px; 
 
    
 
} 
 

 

 
.navbar { 
 
list-style-type: none; 
 
margin: 0; 
 
padding: 0; 
 
overflow: hidden; 
 
background-color: #f2f2f2; 
 

 
} 
 

 
.navbar li { 
 
float: left; 
 

 
} 
 

 
li a, .dropbtn { 
 
display: inline-block; 
 
color: #333; 
 
text-align: center; 
 
padding: 14px 16px; 
 
text-decoration: none; 
 
} 
 

 
.navbar li a:hover, .dropdown:hover .dropbtn { 
 
background-color: #333; 
 
color: #f2f2f2; 
 
} 
 

 
.navbar li.dropdown { 
 
display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
display: none; 
 
position: absolute; 
 
background-color: #f9f9f9; 
 
min-width: 160px; 
 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content a { 
 
color: black; 
 
padding: 12px 16px; 
 
text-decoration: none; 
 
display: block; 
 
text-align: left; 
 
} 
 

 
.dropdown-content a:hover {background-color: #333} 
 

 
.navbar .show {display:block;} 
 

 
.xavierslogo { 
 
width: 110px; 
 
height: 109px; 
 
margin-left: 20%; 
 
    
 
} 
 

 
.xavierstext { 
 
width: ; 
 
height: ; 
 
margin-left: 0%; 
 
    
 
} 
 

 

 
.topbg { 
 
    
 
background-color: #333; 
 
}

<header class="topbg"> 
 
<img src="xavierslogo.png" alt="St. Xavier's college logo" class="xavierslogo"> 
 
<img src="xavierstext.png" alt="St. Xavier's college logo" class="xavierstext"> 
 
</header> 
 

 

 
<ul class="navbar"> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">Text one</a></li> 
 
    <li><a href="#news">Text Two</a></li> 
 
    <li class="dropdown"> 
 
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown ▼</a> 
 
<div class="dropdown-content" id="myDropdown"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
</div> 
 
    </li> 
 

 
</ul> 
 

 
<div class="main"> 
 

 

 
z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br> 
 

 
</div>

Answer 1

добавить следующий код к этому классу

.navbar { 
    list-style-type: none; 
    overflow: hidden; 
    position:fixed; 
} 

body { 
 
    width: 100%; 
 
    height: 100%; 
 
\t margin:0px; 
 
    
 
} 
 
.navbar { 
 
    list-style-type: none; 
 
    overflow: hidden; 
 
    position:fixed; 
 
} 
 
.navbar li { 
 
    float: left; 
 
    
 
    
 
\t 
 
} 
 

 
li a, .dropbtn { 
 
    display: inline- 
 
     block; 
 
    color: #333; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    
 
} 
 

 
.navbar li a:hover, .dropdown:hover .dropbtn { 
 
    background-color: #333; 
 
\t color: #f2f2f2; 
 
} 
 

 
.navbar li.dropdown { 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover {background-color: #333} 
 

 
.navbar .show {display:block;} 
 

 
.xavierslogo { 
 
width: 110px; 
 
height: 109px; 
 
margin-left: 20%; 
 
    
 
} 
 

 
.xavierstext { 
 
width: 100; 
 
height: 100; 
 
margin-left: 0%; 
 
    
 
} 
 

 
.topbg { 
 
    
 
     background-color: #333; 
 
}

<header class="topbg"> 
 
<img src="xavierslogo.png" alt="St. Xavier's college logo" class="xavierslogo"> 
 
<img src="xavierstext.png" alt="St. Xavier's college logo" class="xavierstext"> 
 
</header> 
 
<div> 
 
<ul class="navbar"> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">Text one</a></li> 
 
    <li><a href="#news">Text Two</a></li> 
 
    <li class="dropdown"> 
 
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown ▼</a> 
 
    <div class="dropdown-content" id="myDropdown"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </li> 
 

 
</ul> 
 
    </div> 
 

 
<div class="main"> 
 

 

 
z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br> 
 

 
</div>