Scroll-Bereich eines Buttons innerhalb einer Grid-Area

[Matthias Scharwies]

Guten Morgen!

Ich habe mal ein wenig herumexperimentiert.

Ja.

Deine ursprüngliche Problembeschreibung war:

In diesem Bereich soll ein Scroll-Up Button welcher erst nach ein wenig herunter-scrollen erscheinen soll (im sichtbaren Bereich wäre er ja unsinnig), dann schließend mit auf- oder abscrollt sodass er immer angeklickt werden könnte.

Momentan habe ich keine Vorstellung wie man da herangeht.

Ich möchte lediglich einen Ansatz sodass ich es mir besser Vorstellen kann, keine Komplettlösung.

Felix und Gunnar haben dir genau diese Ansätze gegeben, Gunnar sogar ein Beispiel.

Der Link zur betroffenen Seite ist immer-noch: Testseite V10A

Was mir auf den ersten Blick auffällt:

1. Die vertikale Überschrift ragt in meinem Surface (12''-Monitor) aus dem Viewport raus. Mach das weg! Less is more!
2. Navigation würde ich links positionieren (→ Lesefluss)
   • Das details ist ok, aber auf dem großen Monitor (40'') wäre Platz für alle Links der Navigationen
3. Site-Navigation wäre für mich als Laie ein Inhalt(sverzeichnis)

So lieber Felix. soviel zu Deinem Einzeiler, jetzt trete mal in Aktion.

Ist er doch schon. Du hast seinen Rat ignoriert.

Aber auch an die anderen, bitte ich um Unterstützung. ich möchte mal voran kommen.

Aufgabe an SELFHTML:

In diesem Bereich soll ein Scroll-Up Button welcher erst nach ein wenig herunter-scrollen erscheinen soll (im sichtbaren Bereich wäre er ja unsinnig), dann schließend mit auf- oder abscrollt sodass er immer angeklickt werden könnte.

1. Eine Seite hat so viel Inhalt, dass dieser erst durch Scrollen sichtbar wird.
   • HTML-Struktur (So einfach wie möglich)
     Du baust da im header Schachtelstrukturen mit div's und auch der top-Link besteht aus div,h2, ul, li, a WTF?
2. Sobald die Navigation unsichtbar wird, soll ein Top-Link erscheinen, der nach oben zielt.
   • Solche Berechnungen erfordern JS → siehe Gunnars Tip mit IntersectionOberserver
3. Der Top-Link (Pfeil nach oben) soll mittig am unteren Viewportrand positioniert werden
   • CSS Elemente zentrieren
     Du baust da eine Vielzahl von Grids auf, die man weder braucht noch versteht.
     → Imho ist die gewünschte Position nicht in einem Grid, sondern als Kind des body, den du ja auf Sichtbarkeit testest.

Das ist bei uns im Wiki noch eine Baustelle, die ich aber bis Ende des Monats schließen möchte.

Herzliche Grüße

Matthias Scharwies