スクロールするたびにナビバーを実行する

Question

スクロールするたびにナビバーを上にするように設定しようとしていますが、 navbarが消えます。ここに私のhtmlとcssがあります。

<nav> 
<div class="navbar"> 
<button class="btn button"> Home <A href="#"> </button> 
<button class="btn button"> About Me </button> 
<button class="btn button"> Portfolio</button> 
<button class="btn button"> Contact Me   </button> 
</div> 
</nav> 

<div class="background-img"> 

</div> 

<div class="portfolio"> 

<img src="https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjP5v6bzfDWAhXEto8KHc_gBDoQjRwIBw&url=http%3A%2F%2Fhomequity.us%2Fdesignhouse%2Fbungalow_house_design_malaysia.html&psig=AOvVaw3hVzFHYi5ropXAhSrn1oIx&ust=1508087256948636"> 


</div> 

CSS

nav{ 
    background-color: transparent; 
    position: fixed; 
} 

.btn{ 
    background-color: Black; 
    color: white; 
    font-size: 30px; 
    padding: 10px; 
    margin: 10px 193px 10px 0px; 

} 

.background-img { 
    background: url(https://images.unsplash.com/photo-1497215842964-222b430dc094?dpr=1&auto=compress,format&fit=crop&w=2100&h=&q=80&cs=tinysrgb&crop=); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    width: 100vw; 
    height: 100vh; 
    position: relative; 
} 

`

Answer 1

あなたはまだそれがtop:0として固定された位置だ定義する必要があります。

nav{ 
     background-color: transparent; 
     position: fixed; 
     top:0; 
     width:100%; 
     z-index:15; 
    } 

Answer 2

理由はz-index値です。そしてもう1つは、ナビセクションのタグを閉じるのを忘れるかもしれません。

nav{ 
 
    background-color: transparent; 
 
    position: fixed; 
 
    z-index:99999; /* add z-index value maximum */ 
 
} 
 

 
.btn{ 
 
    background-color: Black; 
 
    color: white; 
 
    font-size: 30px; 
 
    padding: 10px; 
 
    margin: 10px 193px 10px 0px; 
 

 
} 
 

 
.background-img { 
 
    background: url(https://images.unsplash.com/photo-1497215842964-222b430dc094?dpr=1&auto=compress,format&fit=crop&w=2100&h=&q=80&cs=tinysrgb&crop=); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    position: relative; 
 
}

<nav> 
 
<div class="navbar"> 
 
<button class="btn button"> <a href="#">Home</a> </button><!-- You need to close the a tag --> 
 
<button class="btn button"> About Me </button> 
 
<button class="btn button"> Portfolio</button> 
 
<button class="btn button"> Contact Me </button> 
 
</div> 
 
</nav> 
 

 
<div class="background-img"> 
 

 
</div> 
 

 
<div class="portfolio"> 
 

 
<img src="https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjP5v6bzfDWAhXEto8KHc_gBDoQjRwIBw&url=http%3A%2F%2Fhomequity.us%2Fdesignhouse%2Fbungalow_house_design_malaysia.html&psig=AOvVaw3hVzFHYi5ropXAhSrn1oIx&ust=1508087256948636"> 
 

 

 
</div>