WordPress-Frage: Vertikales Scrollen

[thobie]

Moin, Moin,

ich habe ein WP-Site mit folgender Darstellung im Browser:

Header/Menü – Seiteninhalt – Footer.

Scrollt nun jemand nach oben, um den ganzen Inhalt der Seite zu lesen, wandert der Header/Menü erwartungsgemäß nach oben und verschwindet unter der Browser-Menüleiste.

Gibt es eine Möglichkeit, das Scrollen nur auf den Seiteninhalt zu beschränken, damit der Header/Menü oben erhalten bleibt und der Leser beim Lesen des Seiteninhalts immer sieht, auf welcher Seite er sich befindet?

Grüße aus Hamburg

Thobie

 

[Difool]

Wenn du annähernd firm für dein Template (Theme) bist und du etwas mit css anfangen kannst:
https://www.w3schools.com/howto/howto_js_sticky_header.asp

edit:
Mit "firm für dein Theme" meine ich, dass viele Themes css-Klassen für das Scrollen haben.
Also: nicht am scrollen, beim Scrollen und gescrollt haben…
Achso, und beim Responsive für die Smartphones evtl. mal schauen, ob da ein "sticky header" doof käme, weil zu hoch usw.

 

[thobie]

Danke, Difool, ja, so etwas suche. ich. Das nennt sich also ein Sticky Header.

Ich habe mir die verlinkte Webseite angeschaut.

Der Header, eine Bildershow mit MetaSlider, kann ruhig beim Scrollen oben verschwinden. Das Menü ist das wesentliche, das fixiert werden soll. Und dabei ist ja auch der Gedanke des responsiven Themes für mobile Geräte sinnvoll.

Das Menü der Site hat keine ID, nur eine Class:

<div class="menu-primary-container">

Also habe ich den CSS-Code von Deiner Empfehlungsseite genommen und in das zusätzliche CSS des Themes eingebaut:

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

Und den JS-Code habe ich komplett übernommen, habe document.GetElementByID in document.GetElementByClassName("menu-primary-container") geändert und in ein Plugin für zusätzliches JS eingebunden:

// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};

// Get the header
var header = document.getElementByClassName("menu-primary-container");

// Get the offset position of the navbar
var sticky = header.offsetTop;

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

Auf der Site stelle ich beim Scrollen aber keine Änderung fest. Wo liegt mein Fehler?

Thobie

 

[Difool]

Kenne jetzt nicht den Aufbau deines Themes, aber das css-Snippet mit dem "position: fixed;" muss ja auch greifen.

Mache mal aus dem:

.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

dies:

.menu-primary-container .sticky {
  position: fixed;
  top: 0;
  width: 100%
}

Ansonsten müsstest du die Klasse ".sticky" noch der Template-Datei der header.php oder der header-nav.php / header-main.php oder ähnlich hinzufügen.
Also dort, wo die Klasse ".menu-primary-container" hinzugefügt bzw. verbaut ist.

Da setzt du die Klasse ".sticky" mit einem Leerzeichen hinzu: (Beispiel)

<ul class="menu-primary-container sticky">
    <li>Menu-Punkt 1</li>
    <li>Menu-Punkt 2</li>
    <li>usw…</li>
</ul>

 

[thobie]

Moin, Moin,

ich bin jetzt einen anderen Weg gegangen. Ich wusste nicht, dass es für diese Funktion auch Plugins gibt, worauf mich ein Kollege hinwies.

Ich habe recherchiert und ein Plugin für einen Sticky Header ausgewählt und konfiguriert, das gut funktioniert und auch den gewünschten Effekt erbringt.

Das einzige Problem, auf das Du mich ja hingewiesen hast, ist dasjenige, dass die Funktion bei dem responsiven Theme sehr unterschiedlich ist.

Auf dem Dektop funktioniert es gut und wie gewünscht. Auf dem Tablet auch, nur ist das gewünschte Fixieren des Menüs vertikal leicht versetzt. Und auf dem Smartphone funktioniert es nicht, denn dort ist das Menü ja zu einem Button mit PopUp-Funktion umgebaut, und sobald man nach unter scrollt, kommt man im Menü nicht mehr über einen bestimmten Menüpunkt hinaus.

Aber da die Funktionalität auf dem Desktop das Wesentliche ist, werde ich wohl damit leben müssen. Oder auf den Sticky Header verzichten müssen.

Grüße aus Hamburg

Thobie

 

[thobie]

Moin, Moin, Kollegen,

die Angelegenheit hat sich komplett erledigt.

Ich bin davon ausgegangen, dass sich dieses Problem auf das Scrollen innerhalb einer Seite bezieht.

Und nicht, dass es darum geht, die Menüleiste bzw. den Header klebrig zu machen bzw. ihn zu fixieren. Mir war also der Begriff "Sticky Header" bzw. Fixieren des Menüs nicht bekannt.

Das verwendete Plugin fixiert zwar die Menüleiste beim Scrollen. Jedoch verschiebt sie sie an den linken Seitenrand im Browserfenster.

Als ich das durch zusätzliches CSS beheben wollte, stieß ich darauf, dass das verwendete Theme ColorMag im Customizer schon die Option "Fixiertes Menü" anbietet. Das wusste ich nicht. Denn bisher wusste ich nicht, wonach ich beim Lösen des Problems suchen muss.

Nun wird das Menü fixiert. Und bleibt schön mittig in seiner Position.

Problem behoben. Danke!

Grüße aus Hamburg

Thobie