Verblassen der Bootstrap-Navigationsleiste beim Scrollen nach unten, während die Textfarbe geändert wird

Daher arbeite ich an einer Ruby on Rails-App mit einem Design, das mir gegeben wurde. Diese fordert, dass die Navigationsleiste oben auf der Seite transparent ist und nach dem Scrollen an einem Zertifizierer vorbei in festes Weiß übergeht<section> Gleichzeitig ist auf der Seite der Link-Text der Navigationsleiste oben weiß und wird gleichzeitig grau<section>.

Ich habe mich mit JavaScript befasst, das die Deckkraft beim Scrollen nach unten ändert, aber es ist mir nicht gelungen, es zum Laufen zu bringen. Ich würde mir vorstellen, dass die gleichen Funktionen, mit denen die Navigationsleiste in Weiß eingeblendet wird, auch mit den Navigationsleisten-Links funktionieren, die ebenfalls in Grau eingeblendet werden.

Ich habe mir auch das .affix js [Plugin auf Bootstrap angesehen, aber ich kenne kein sehr fortgeschrittenes Javascript, um es an meine Bedürfnisse anzupassen. Wenn es hilfreich ist, beginnt die Struktur der Navigationsleiste in der Ansicht der App wie folgt:

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

Jede Hilfe wird gebeten! Ich würde dieses Design sehr gerne zum Laufen bringen, und das meiste habe ich bereits getan. Dieser Teil hat mich verblüfft. Jede Hilfe wird geschätzt!

Antworten auf die Frage(3)

Ihre Antwort auf die Frage