Rolf B: jQuery Anfänger: Eigenen Eventhandler unmittelbar nach(!) Default-Aktion des Click-Events ausführen

Beitrag lesen

SELF-Forum

jQuery Anfänger: Eigenen Eventhandler unmittelbar nach(!) Default-Aktion des Click-Events ausführen

Rolf B (Versionen)
– Informationen zu den Bewertungsregeln

Hallo io,

aus meiner Sicht bringen sticky headers, die mit JavaScript oder position:fixed oben am Rand schweben, mehr Ärger als Nutzen.

Mein Lösungsvorschlag: passendes HTML Markup und CSS. KEIN JavaScript.

<body>
<header>
   <h1>Hello Foo</h1>
</header>
<nav><a href="#reallyInteresting">Click Me, I'm great!</a></nav>
<div id="scrollframe">
<main>
<section>...</section>
<section>...</section>
<section>...</section>
<section>
   <h2 id="reallyInteresting">And now for something really interesting</h2>
   <p>... some vewy intewesting text ...</p>
</section>
<section>...</section>
<section>...</section>
<section>...</section>
</main>
<footer>
...
</footer>
</div>
</body>

Das wäre ein beispielhafter Seitenrahmen, wo mittendrin eine Section ist die aus der Navigation angesprungen wird.

UM Header und Navigation oben zu lassen, mache ich in solchen Fällen aus dem Body eine Flexbox. Damit das gelingt, muss man die Standard-Margins und -Paddings von html und body etwas tweaken:

html {
  margin: 0; padding: 8px;
  height: 100vh; box-sizing: border-box;
}
body {
  margin: 0; height: 100%;
  display: flex; flex-direction:column;
}

Sinn dieser Tweaks ist, in der height-Angabe nicht mit calc() herumrechnen zu müssen. Normalerweise hat der Body einen gewissen margin, den habe ich zum Padding des HTML gemacht und den Body auf margin:0 gesetzt (falls er bei Dir noch padding hat, musst Du ihm ebenfalls box-sizing:border-box geben damit height:100% nicht zu einem unerwünschten Scrollbar der Gesamtseite führt).

Im Body befinden sich - bei meinem HTML - nun drei Boxen. Der header, die <nav>igation und das #scrollframe-Div. Ob Du dieses Div brauchst oder nicht ist eine Frage deines Seitendesigns. Soll der footer ebenfalls ständig sichtbar sein? Dann muss das div weg und <main> bekommt id="scrollframe". Auf kleinen Viewports kann das allerdings störend sein. @Gunnar Bittersmann: Ja, das div ist nervig, wenn der Footer mitscrollen soll. Aber ich wüsste nicht, wie man es weg bekommt.

In der gezeigten Fassung werden header und nav oben bleiben. Nur der Inhalt von #scrollframe hat einen Scrollbar und kann verschoben werden. Dazu bekommt #scrollframe ein flex Attribut (header und nav brauchen keins, der Default ist okay für sie):

#scrollframe {
  flex: 1 1 auto;
  overflow-y:scroll;
}

und natürlich noch mehr Styles, je nach deinen Layout-Wünschen. Klickst Du auf den Link, scrollt nur der #scrollframe-Inhalt.

Der Link führt Dich auf ein jsFiddle, das das demonstriert:
https://jsfiddle.net/ckmruxhj/

Mit Grid statt Flexbox kannst Du auch auf diese Weise auch noch fixe Sidebars unterbringen.

Rolf

--
sumpsi - posui - clusi
Beitrag melden
–
Informationen zu den Bewertungsregeln