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

Header minimieren beim Scroll-Down

Dieses Thema im Forum "Design" wurde erstellt von dea1h85, 12. März 2020.

  1. dea1h85

    dea1h85 New Member

    Registriert seit:
    12. März 2020
    Beiträge:
    3
    Zustimmungen:
    0
    Hallo zusammen,

    ich bin neu hier. Neu ist für mich auch der Umgang mit Wordpress und CSS.

    Ich möchte den Header meines verwendeten "free" oceanwp Theme mit CSS bzw. einem Custom JS erweitern. Teilweise funktioniert es auch schon.
    Allerdings habe ich noch eine Hürde zu meistern. Aus dem unten eingefügten Script funktioniert folgender Befehl nicht:

    document.getElementById("site-header").getElementsByClassName("minimal-header effect-seven clr")[0].style.data-height = "30";

    Mit dem Script unten möchte ich erreichen, dass sich die Höhe des Headers, die Größe des Logos, die Größe der einzelenen Menüpunkte verkleinert und sich die Hintergrundfarbe ändert, sobald man nach unten scrollt.

    Außerdem habe ich den Header mit dem CSS-Code fixiert:

    * #site-header {
    position: fixed;
    width: 100%;
    top: 0;
    }

    Ich hoffe meine Wortwahl ist korrekt. Wenn Ihr Rückfragen habt, lasst es mich bitte wissen. Über ein Feedback wäre ich euch dankbar.

    Gruß

    ====================================================================
    // When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size

    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
    if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    //document.getElementById("site-header").data-height="35";
    //document.getElementById("site-header").style.backgroundColor = "red";
    document.getElementById("site-header").getElementsByClassName("minimal-header effect-seven clr")[0].style.data-height = "30";
    document.getElementById("site-header").style.padding = "0px 0px 0px 0px";
    document.getElementById("custom-logo").style.fontSize = "15px";
    } else {
    //document.getElementById("site-header").data-height="72";
    document.getElementById("site-header").style.backgroundColor = "white";
    //document.getElementById("site-header").style.padding = "100px 10px 40px 30px";
    document.getElementById("custom-logo").style.fontSize = "35px";
    document.getElementById("text-wrap").style.fontSize = "35px";
    }
    }
     
  2. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.636
    Zustimmungen:
    1.778
    Ohne Link zur Seite kann man kaum helfen und .style.data-height ist ungültiges JavaScript, mehr dazu ggf. hier oder hier.

    Mit WordPress an sich hat das nichts zu tun, evtl. wäre die Frage besser in einem JavaScript Forum aufgehoben.
     
  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