ユーザーがスクロールしながら徐々にナビゲーションの背景を変更します

Question

この単純なナビゲーションを背景の透明から背景の明るい緑へと徐々に移行したいと考えました。 $（window）.scrollTop（）jQuery関数を使用して上からの距離を取得し、10で割って滑らかな遷移を得ようと考えていますが、chromeとfirefoxで実行するとまだまだ気が利いています。

これを行う別の方法（よりスムーズでモダンな）がありますか？

フラットデザインアートを誘発し、ウェブサイトにシンプルで実用的な現代的な雰囲気を与えるために、デザインを非常にシンプルにしたいと思っていました。 FYI

：

私はドロップダウン、拡張などをたくないので、それらを示唆いけません。 また、色を判断しないでください。 アクチベータリンクはモバイル用です（私はドロップダウンを持っています）。気にしないでください。

マークアップ：

<nav> 
       <a id="activator"></a> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Courses</a></li> 
        <li><a href="#">Contact</a></li> 
        <li><a href="#">Log out</a></li> 
       </ul> 
    </nav> 

スタイル：

<style> 
nav{ 
    position: fixed; 
    width: 100%; 
    z-index: 2; 
    height: 2em; 
} 
nav ul{ 
    overflow: hidden; 
    background: #1adc8c; 
    height: auto; 
} 
nav ul li{ 
    float: none; 
    text-align: center; 
    width: 100%; 
    margin: 0%; 
    padding: 0px; 
    font-weight: bold; 
    font-size: 1.1em; 
} 
nav ul li a{ 
    display: block; 
    color: #FFF; 
    text-decoration: none; 
    font-family: sans-serif; 
    font-size: 1.2em; 
    padding: 20px; 
} 
</style> 

JQとJS：

if(window.innerWidth > 400){ 
     $(window).scroll(function(){ 
     var fromTop = $(this).scrollTop(); 
     if(fromTop >= 100){ 
      $("nav").css({ 
       "background" : "rgba(26, 220, 140,0." + fromTop/10 + ")" 
      }); 
      if(fromTop >= 600){ 
       $("nav").css({ 
        "background" : "rgba(26,220,140,1)" 
       }); 
      } 
     }else{ 
      $("nav").css({ 
       "background" : "" 
      }); 
     } 
     }); 
    } 

Answer 1

あなたに

transition: all 200ms; 
will-change: background; 

性質navクラス、それがスムーズに見えるようにするを追加してみてください。あなたは* 3

if (window.innerWidth > 400) { 
 
    $(window).scroll(function() { 
 
    var fromTop = $(this).scrollTop(); 
 
    if (fromTop >= 100) { 
 
     $("nav").css({ 
 
     "background": "rgba(26, 220, 140,0." + fromTop/10 + ")" 
 
     }); 
 
     if (fromTop >= 600) { 
 
     $("nav").css({ 
 
      "background": "rgba(26,220,140,1)" 
 
     }); 
 
     } 
 
    } else { 
 
     $("nav").css({ 
 
     "background": "" 
 
     }); 
 
    } 
 
    }); 
 
}

.long-div { 
 
    height: 500vh; 
 
} 
 

 
nav { 
 
    position: fixed; 
 
    width: 100%; 
 
    z-index: 2; 
 
    height: 4em; 
 
    transition: all 500ms; 
 
    will-change: background; 
 
} 
 

 
nav ul { 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: auto; 
 
    list-style-type: none; 
 
} 
 

 
nav ul li { 
 
    float: left; 
 
    text-align: center; 
 
    margin: 0%; 
 
    padding: 0px; 
 
    font-weight: bold; 
 
    font-size: 1.1em; 
 
} 
 

 
nav ul li a { 
 
    display: block; 
 
    color: #000; 
 
    text-decoration: none; 
 
    font-family: sans-serif; 
 
    font-size: 1.2em; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <a id="activator"></a> 
 
    <ul> 
 
    <li> 
 
     <a href="#">Home</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Courses</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Contact</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Log out</a> 
 
    </li> 
 
    </ul> 
 
</nav> 
 
<div class="long-div"> 
 
</div>

Answer 2

あなたはおそらく、単にCSSクラス（例えば.alternative）トグルしたほうが良いと思いますあなたがスクロールした距離に依存します。これをCSS transitionと組み合わせることで、スムーズに、うまく移行することができます。

実例については、次のコードスニペットを参照してください。

$(window).scroll(function() { 
 
    var fromTop = $(this).scrollTop() 
 
    if (fromTop >= 100) { 
 
    $('nav').addClass('alternative') 
 
    } else { 
 
    $('nav').removeClass('alternative') 
 
    } 
 
})

nav { 
 
    position: fixed; 
 
    width: 100%; 
 
    z-index: 2; 
 
    height: 2em; 
 
    background-color: transparent; 
 
    transition: background-color 0.5s; 
 
} 
 

 
nav.alternative { 
 
    background-color: #1adc8c; 
 
} 
 

 
nav ul { 
 
    overflow: hidden; 
 
    background: #1adc8c; 
 
    height: auto; 
 
} 
 

 
nav ul li { 
 
    float: none; 
 
    text-align: center; 
 
    width: 100%; 
 
    margin: 0%; 
 
    padding: 0px; 
 
    font-weight: bold; 
 
    font-size: 1.1em; 
 
} 
 

 
nav ul li a { 
 
    display: block; 
 
    color: #FFF; 
 
    text-decoration: none; 
 
    font-family: sans-serif; 
 
    font-size: 1.2em; 
 
    padding: 20px; 
 
} 
 

 
.spacer { 
 
    min-height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <a id="activator"></a> 
 
    <ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Courses</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    <li><a href="#">Log out</a></li> 
 
    </ul> 
 
</nav> 
 

 
<div class="spacer"></div>