scrolldownのブートストラップnavbar

Question

私はこのウェブサイトをガイドとして使用してウェブデザインを練習していますhttp://www.montere.it/?lang=en。

これまでのところ、ロゴとナビゲーションバーを中央に配置し、ロゴはナビゲーションバーの上に表示されましたが、スクロールしてもナビゲーションバーがフェードして表示されないという問題があります。

これは私が試みたものです。助けてください。

のCss

body { 
    height: 3000px; 
    background: red; 
} 

.navbar-fixed-top { 
    background-color: black; 
    transition: background-color 2s ease 0s; 
} 

.navbar-fixed-top.opaque { 
background-color: rgba(255,255,255,0); 
transition: background-color 2s ease 0s; 
} 

.navbar { 
    position: relative; 
} 
.navbar-brand { 
    position: absolute; 
    left: 50%; 
    margin-left: -50px; 
    display: block; 
} 

.navbar .navbar-nav { 
    display: inline-block; 
    float: none; 
} 

.navbar .navbar-collapse { 
    text-align: center; 
    padding-top: 40px; 
} 

.navbar-right { 
    position: relative; 
    bottom: 35px; 
    display: block; 
} 

のJs

$(window).scroll(function() { 
    if($(this).scrollTop() > 100) { 
     $('.navbar-fixed-top').addClass('opaque'); 
    } else { 
     $('.navbar-fixed-top').removeClass('opaque'); 
    } 
}); 

https://jsfiddle.net/esranj00/

Answer 1

私はスクロールダウンしたときに私のナビゲーションバーには、フェードと表示されません？だからあなたはそれが固定され、ユーザーが右にスクロールするとフェードしたいですか？

ちょうど位置を追加：固定固定top.opaqueを.navbar、私はあなた

.navbar-fixed-top.opaque { 
background-color: rgba(255,255,255,0.5); 
transition: background-color 2s ease 0s; 
    position:fixed; 
    } 

if($(this).scrollTop() > 0) { 

ために0.5を選択した0と1の間の値に背景色RGBA（4値）に0を変更します

あなたが待たずにこの値を0に変更する