así que estoy trabajando en una aplicación Ruby on Rails con un diseño que me da que requiere que la barra de navegación sea transparente en la parte superior de la página, y luego se desvanezca en blanco sólido después de desplazarse hacia abajo más allá de un certian<section> en la página, al mismo tiempo, el texto del enlace de la barra de navegación es blanco en la parte superior y se desvanecerá en gris al mismo tiempo<section>.

He buscado JavaScript que cambia la opacidad en el desplazamiento hacia abajo, pero no he tenido éxito para que funcione. Me imagino que las mismas funciones se desvanecen en la barra de navegación a blanco, también funcionaría con los enlaces de la barra de navegación que se desvanecen a gris también.

También examiné el .affix js [plugin en Bootstrap, pero no conozco JavaScript muy avanzado para modificarlo según mis necesidades. En caso de que sea útil, la estructura de la barra de navegación en mi vista de la aplicación comienza 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 ...

¡Cualquier ayuda es apreciada! Realmente me encantaría hacer funcionar este diseño, y ya lo he hecho la mayor parte, esta parte en particular me ha dejado perplejo. Cualquier ayuda es apreciada!