Bootstrap аффикс - Cant удается скрыть элемент изображения при прокрутке вниз

Question

Когда я прокручиваю вниз, я хочу, чтобы скрыть большой логотип и выставить маленький логотип

<div class="row clearfix" > 
    <div class="col-md-12 column"> 
    <nav class="navbar navbar-default" role="navigation" data-spy="affix" data-offset-top="10"> 
     <div class="navbar-header"> <a class="big_logo" href="#"><img src="img/logo.png" alt="logo"></a><a class="small_logo" href="#"><img src="img/logo_small.png" alt="logo_small"></a></div> 
    </nav> 
    </div> 
</div> 

Я не знаю, что я Мессинг здесь, в моем CSS :

.big_logo { 
} 
.big_logo.affix { 
     display:none; 
} 
.small_logo { 
     display:none; 
} 
.small_logo.affix { 
} 

Answer 1

Вы ожидаете .big_logo и .small_logo, чтобы получить класс .affix. Это элемент, который имеет data-spy="affix", что на самом деле получение .affix класса, так что вы должны изменить ваш селектор CSS для .affix .big_logo вместо .big_logo.affix как это:

.small_logo { 
    display: none; 
} 
.affix .small_logo { 
    display: block; 
} 
.affix .big_logo { 
    display: none; 
}