Vertikales Scrollen

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

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

Ich bin beim Recherchieren nach diesem Thema auf diese Seite gestoßen: https://www.w3schools.com/howto/howto_js_sticky_header.asp

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 der Webseite 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

Moin, Moin,

ich bin jetzt einen anderen Weg gegangen.

Ich wusste natürlich 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 mich auch ein Kollege hingewiesen hat, 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

Moin, Moin, Meisterleiste,

Zitat von meisterleise

ggf. kann dir hier noch jemand helfen, …

danke.

Zitat

… wenn du
a) die Seite verlinkst

Am besten auf dieser Seite zu sehen: https://www.asp-hamburg.de/gewerbe/betriebshaftpflicht/

Zitat

b) dein genutzetes Theme nennst

https://themegrill.com/themes/colormag

Zitat

c) das auserwählte Plugin nennst

Fixed And Sticky Header

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