Twenty seventeen - Position im Menu beim scrollen auf Startseite anzeigen?

Hallo zusammen,
verwende Twenty Seventeen und möchte gerne, dass sich beim Runterscrollen auf der Startseite mit Wechsel bzw. Erreichen der einzelnen Abschnitte (Panels) sich im oberen Menu die einzelnen Menupunkte verändern und dadurch klar wird, wo sich derzeit die Positon zu den einzlenen Abschnitten im Menue befindet? Oder anders formuliert: wie bekomme ich eine automatische Farbänderung- oder Anpassung der Menüpunkte abhängig von der Scroll Position auf der Startseite hin?
Habt ihr eine Idee?

Danke für deine Rückmeldung.
Sorry, bin absoluter Anfänger und habe wie wild danach gegoogelt und nichts entsprechendes gefunden. Wahrscheinlich weil ich nicht die richtigen Begriffe verwendet habe. Aber das ist ein anderes Thema. ;)
Wenn ich dich richtigverstehe dann bedeutet das, über das css im cusomizer von Twenty Seventeen kann ich das nicht regeln.

Hast Du einen Tipp wie ich das jetzt am besten angehe? Bitte Schritt-für-Schritt-Tipps, das wäre super!

Du hast recht, mit den Stichworten findet sich einiges.

Trotzdem habe ich noch eine Frage. ;)

Kannst Du mir sagen, wie der Effekt den ich meine, wie der genau heißt?
Das beim Scrollen im Menue jeweils der entsprechende Seitenabschnitt angezeigt wird, bzw. sich der Schriftzug verändert?

Ich benötige konkrete Tipps, einfach formuliert, wie ich das Scrollen bei twenyty seventeen optimieren kann.
Wie habt ihr das angepasst bzw. wie seid ihr dabei vorgegangen?
Wäre für ein paar mehr Tipps wirklich sehr dankbar!

Kannst Du mir bitte sagen, wo genau ich das eintrage und
wie die Bezeichnung der active-class ist für das was ich machen möchte?
Das wäre super hilfreich! Wie gesagt, ich habe noch sehr wenig Ahnung!!!

Hab super vielen Dank für deine Tipps.
Und du hast völlig recht, ich werde und möchte mein "Grundlagenwissen" auch ausbauen. Hoffentlich verdrängt das dann step-by-step das Gefühl "ich sehe den Wald vor lauter Bäumen nicht". Es ist wie ein Puzzle ...

Was ich einfach noch nicht gerafft habe ist, auf welchen Ebenen muss ich entsprechende Änderungen und Anpassungen für jQuerry vornehmen, damit es funkt.

Also, im Customizer des Themes unter css kann ich ja entsprechende Angaben machen, die dann ggf. direkte Änderungen verursachen.
Ich muss aber nicht nur das css ändern sondern auch Einträge bei javascript vornehmen, richtig?

Jetzt meine völlig unqualifizierte(n) Frage(n):

Wenn das so ist, wo genau ist das?

Oder muss ich schlicht und ergreifend einfach so lange am css-Eintrag feilen, bis der gewünschte Effekt da ist?

Wenn ich beispielsweise folgende Angaben einfach ins css-Feld hineinkopiere:

body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.menu {
width: 100%;
height: 75px;
background-color: rgba(0, 0, 0, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.light-menu {
width: 100%;
height: 75px;
background-color: rgba(255, 255, 255, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
}
#menu-center ul {
margin: 15px 0 0 0;
}
#menu-center ul li {
list-style: none;
margin: 0 30px 0 0;
display: inline;
}
.active {
font-family:'Droid Sans', serif;
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 50px;
}
a {
font-family:'Droid Sans', serif;
font-size: 14px;
color: black;
text-decoration: none;
line-height: 50px;
}
#home {
background-color: grey;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url(images/home-bg2.png);
}
#portfolio {
background-image: url(images/portfolio-bg.png);
height: 100%;
width: 100%;
}
#about {
background-color: blue;
height: 100%;
width: 100%;
}
#contact {
background-color: red;
height: 100%;
width: 100%;
}

dann verändert sich zwar die Menuschrift aber den gewünschten Effekt habe ich noch nicht erzielt.
Muss ich jetzt an dieser Stelle die Angaben ensprechend anpassen oder kann es gar nicht funktionieren, weil ich auch noch an anderen Stellen was ändern muss?

Hab ersteinmal super vielen Dank für die Tipps und Geduld,
das war super hilfreich. ;)))

Habe erfolgreich ein Childtheme angelegt und die entsprechenden Anpassungen vorgenommen.

Allerdings tue ich mich derzeit immer noch schwer die einzelnen Ebenen korrekt zuzuorden.

- Wo trage ich javascript/jQuery-Änderungen genau ein?
Im Editorberich des Dashbords wo die css-Datei des neuen Childthemes abgelegt ist oder direkt in der neuen css-Datei?

Ich bearbeite das WP-Theme Twenty Seventeen mit Xampp und phpMyAdmin.
Nach Möglichkeit möchte ich so wenig Plugins verwenden wie möglich.