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으로 변경하십시오.