então, estou trabalhando em um aplicativo Ruby on Rails com um design que requer que a barra de navegação seja transparente na parte superior da página e depois desbote em branco sólido depois de rolar para baixo uma certificação<section> na página, ao mesmo tempo, o texto do link da barra de navegação fica em branco na parte superior e desbotará em cinza ao mesmo tempo<section>.

Analisei o JavaScript que altera a opacidade no controle, mas não tive sucesso em fazê-lo funcionar. Eu imagino que as mesmas funções que desbotam na barra de navegação para branco também funcionem com os links da barra de navegação para cinza também.

Também procurei no .affix js [plugin no Bootstrap, mas não conheço javascript muito avançado para modificá-lo de acordo com minhas necessidades. Caso seja útil, a estrutura da barra de navegação na visualização do aplicativo começa como:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">
        <%= image_tag "logo-small.png" %>
      </a>

... "render partial" lines depending on if the user is logged in or not ...

Toda e qualquer ajuda é apreciada! Eu adoraria fazer esse design funcionar, e já fiz a maior parte dele, essa parte em particular me deixou perplexo. Qualquer ajuda é apreciada!