Afixo Bootstrap - Não consigo ocultar o elemento da imagem ao rolar para baixo

Question

Quando rolar para baixo, quero ocultar o logotipo grande e expor o logotipo pequeno

<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>

Não sei o que estou bagunçando aqui no meu CSS:

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

Answer 1

Você está esperando .big_logo e .small_logo para conseguir a aula .affix.É o elemento que tem data-spy="affix" isso é realmente conseguir o .affix class, então você precisa modificar seu seletor CSS para .affix .big_logo em vez de .big_logo.affix assim:

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