下にスクロールしたときに色が薄くなるナビゲーションバー

Question

私はQを持っています。割り当てがあり、IMだけがphp、css、javascripを使用することができます。私は本当にJavaスクリプトで新しいです。しかし、私の質問は、どのように私はスクロールダウン、私はそれが1ページのサイトにしたいときに消える色を持っているナビゲーションバーを作ることです。 Ps。私はJqueryを使用することはできません

Answer 1

この問題を解決するためにJQueryライブラリを使用することができます。これにより、いくつかのサーバー側言語でいくつかの動的な処理を行うことができます。

HTML：：

<div id="container"> 

<div>Hello</div> 
<div>Hello</div> 
<div>Hello</div> 
<div>Hello</div> 
<div>Hello</div> 
<div>Hello</div> 
<div class="hideme">Fade In</div> 
<div class="hideme">Fade In</div> 
<div class="hideme">Fade In</div> 
<div class="hideme">Fade In</div> 
<div class="hideme">Fade In</div> 

CSS：

#container 
{ 
    height:2000px;  
} 

#container DIV 
{ 
    margin:50px; 
    padding:50px; 
    background-color:lightgreen; 
} 

.hideme 
{ 
    opacity:0; 
} 

ここ

は、いくつかのdivのフェードとスクロールの一例ですが、私はそれはあなたのためにGoogleで探していました

JQuery：

$(document).ready(function() { 

/* Every time the window is scrolled ... */ 
$(window).scroll(function(){ 

    /* Check the location of each desired element */ 
    $('.hideme').each(function(i){ 

     var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
     var bottom_of_window = $(window).scrollTop() + $(window).height(); 

     /* If the object is completely visible in the window, fade it it */ 
     if(bottom_of_window > bottom_of_object){ 

      $(this).animate({'opacity':'1'},500); 

     } 

    }); 

}); 
}); 

here the link for example