1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

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

Dieses Thema im Forum "Allgemeines" wurde erstellt von stone#, 31. Mai 2017.

  1. stone#

    stone# Member

    Registriert seit:
    31. Mai 2017
    Beiträge:
    11
    Zustimmungen:
    0
    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?
     
  2. NDDT

    NDDT Well-Known Member

    Registriert seit:
    1. März 2015
    Beiträge:
    275
    Zustimmungen:
    0
    Eine Reaktion auf die aktuelle Scroll-Position kann man nur mit JavaScript hinbekommen.

    Es gibt ein Event "onScroll" das immer ausgeführt wird wenn der User scrollt.

    Das kannst du verwenden um auszulesen an welcher Position du gerade bist und dem entsprechenden Menu-Item eine active-class anzuhängen.

    Es gibt eine Menge Implementierungsbeispiele. Leicht über Google zu finden ;)
     
  3. stone#

    stone# Member

    Registriert seit:
    31. Mai 2017
    Beiträge:
    11
    Zustimmungen:
    0
    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!
     
  4. stone#

    stone# Member

    Registriert seit:
    31. Mai 2017
    Beiträge:
    11
    Zustimmungen:
    0
    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?
     
  5. stone#

    stone# Member

    Registriert seit:
    31. Mai 2017
    Beiträge:
    11
    Zustimmungen:
    0
    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!
     
  6. stone#

    stone# Member

    Registriert seit:
    31. Mai 2017
    Beiträge:
    11
    Zustimmungen:
    0
    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!!!
     
  7. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Es gibt dazu im Netz viele Tutorials und Anleitung. Eine "exakte" Anleitung, die du nur noch kopieren und einfügen musst, wird dir hier (vermutlich) keiner zusammenschreiben.

    Aber ich habe zum Beispiel gerade folgendes gefunden:

    https://stanhub.com/tutorials/change-active-state-in-sticky-navigation-on-scroll/

    Oder als Fiddle:
    https://jsfiddle.net/cse_tushar/Dxtyu/141/




    Dann wirst du dir wahrscheinlich zwangsläufig ein bisschen Grundlagen-Wissen draufschaffen müssen. Das was du hier vor hast ist für einen "absoluten Anfänger" nicht ganz ohne.
     
  8. stone#

    stone# Member

    Registriert seit:
    31. Mai 2017
    Beiträge:
    11
    Zustimmungen:
    0
    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 ...
     
  9. stone#

    stone# Member

    Registriert seit:
    31. Mai 2017
    Beiträge:
    11
    Zustimmungen:
    0
    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?
     
  10. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Ja, das Gefühl wird verschwinden und es werden viele Groschen fallen ;)
    Ich würde aber mit einer einfacheren Aufgabe anfangen. Bei dieser Aufgabenstellung ist die Lernkurve doch recht hoch.


    Das ist korrekt so. Das "Problem" lässt sich nicht allein mit CSS lösen, sondern benötigt CSS und javascript/jQuery.

    Sinnvollerweise würdest du dafür ein Child-Theme anlegen:
    https://www.elmastudio.de/ein-wordpress-child-theme-anlegen-so-gehts-richtig/

    Dort legest du dann eine neue JS-Datei an. Da kommt dann dein Code rein.

    Eingebunden wird es dann mit wp_enqueue_scripts:
    https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts


    Es gibt auch Plugins, mit denen man Custom-Javascript über das Dashboard einfügen kann (ähnlich wie das "Zusätzliche CSS" im Dashboard).
    Ich würde es aber an deiner Stelle gleich richtig machen/lernen (also durch erstellen des Child-Themes).
     
  11. stone#

    stone# Member

    Registriert seit:
    31. Mai 2017
    Beiträge:
    11
    Zustimmungen:
    0
    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.
     
  12. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Weder noch. Javascript gehört nicht in eine CSS Datei. Wie der Name schon sagt, gehört in eine CSS-Datei nur CSS ;)

    Javascript kommt entweder in eine JS-Datei, die dann über die functions.php eingebunden wird.
    https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts

    Notfalls auch direkt im <head>-Bereich oder im Footer:
    https://wiki.selfhtml.org/wiki/HTML/Skripte/script


    Ein Plugin wird bei oben beschriebender Vorgehensweise nicht benötigt.
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden