• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Fixe Navigation + Anker

AzRaIL

Mitglied
Moin,

habe eine Fixe horizontale Navigation mit Ankerlinks. Habe es so hinbekommen dass der Inhalt einen offset nach oben besitzt sodass die Beiträge direkt unter die Navigation scrollen.

Beim ersten Beitrag sieht es auch gut aus (weil darüber nichts ist). Bei allen anderen scrollt der vorherige Inhalt aber hinter die Navigation und bis zum oberen Seitenrand was nicht so toll aussieht.

Nun hab ich mir überlegt ob es möglich wäre den Inhalt schon vorher "verschwinden" zu lassen, quasi direkt unter der Navigation und nicht erst am oberen Seitenrand.

Struktur sieht so aus:

Code:
<ul>
      <li><a href="#artikel1">Artikel 1</a></li>
      <li><a href="#artikel2">Artikel 2</a></li>
      <li><a href="#artikel3">Artikel 3</a></li>
      <li><a href="#artikel4">Artikel 4</a></li>
</ul>
<a id="artikel1"></a>
<div>
-- INHALT --
</div>
<a id="artikel2"></a>
<div>
-- INHALT --
</div>
<a id="artikel3"></a>
<div>
-- INHALT --
</div>
<a id="artikel4"></a>
<div>
-- INHALT --
</div>

Ein div richtig positioniert um alle Beiträge herum mit einer fixen Position und overflow:hidden; wäre für mich das logischste, jedoch bewegen sich die Beiträge dann nicht mehr nach oben (kein scrollen möglich).

Hättet Ihr eine Idee wie man das Problem angehen kann?

lg
 
Link geht grad schlecht da dass ganze momentan nur lokal läuft.
Habe aber ein Bild erstellt was licht ins dunkel bringen sollte

Der Rote Balken stellt die grenze da ab der nach oben hin nichts mehr sichtbar sein soll von den divs.
Falls etwas noch nicht ganz klar ist bitte bescheid geben :)

lg
 

Anhänge

  • Unbenannt-1.jpg
    Unbenannt-1.jpg
    510,2 KB · Aufrufe: 5
Entweder ein entsprechend großer Container mit position: fixed an den Head der Seite, oder die Divs werden per JS ausgeblendet, wenn sie sich an der gewünschten Stelle befinden.
 
Jop hatte ja schon einen fixen Header dessen Höhe ich nun vergrößert hab. Navigation musste ich dann noch über den Header packen damit die nicht auch verschwindet. Danke :)
 
Zurück
Oben