-
Scrolled to fixed
Verwende die das jquery scrolledtofixed. Funktioniert alles wunderbar nur hab ich eine Problem.
Ich lasse meinen Header und eine zweite Navigation oben am Bildrand fixen die Höhe der beiden Elemente is ca. 200px. Jetzt habe ich aber das Problem wenn ich aus der unteren Navigation eine Seite direkt anspringen will mit den Ankern scrolled der enstprechende Bereich zu weit nach oben, sodaß dieser eben um einige Pixel zu weit unten den Header rutscht.
Gibt es eine Funktion wie ich ob die Scrollposition beeinflussen kann?
Danke für eure Hilfe.
-
Hallo Folia-Cut,
hast Du einen Link wo man sich das Anschauen kann?
Viele Grüße
MiTsch
-
Ja klar:
www.folia-cut.de/contao bisher nur unter der Kategorie "Autoglasfolien" probehalber.
-
Das ist ein altes Problem. Lösungen gibts viele... allen gemein ist, das man Kompromisse machen muss.
Guck mal z.B.:
http://molily.de/css-position-fixed
Oder:
http://lmgtfy.com/?q=fixed+header+anker ;)
Bim stackoverflow Link gibts viele Ansätze.
Gruß
Thomas
-
Einfachste Variante für deinen Fall:
PHP-Code:
... {
padding-top: 150px;
margin-top: -150px;
}
Wie du den Selektor auswählst bleibt dir überlassen. Beispielsweise könntest du den Artikeln (oder sonstigen beliebigen Elementen), die diesen "Versatz" haben sollen noch eine zusätzliche Klasse 'scroll-fix' oder whatever geben, dann halt:
PHP-Code:
.mod_article.scroll-fix {
padding-top: 150px;
margin-top: -150px;
}
Den Wert von 150px kannst du natürlich auch noch entsprechend anpassen (wenn du bspw. mehr Abstand zwischen dem #hover Menü und der Überschrift haben willst). Außerdem musst du den Wert jedesmal anpassen, wenn sich die Höhe des <header> oder des #hover Menü (stark) ändert.
Für etwaige Nebenwirkungen dieser Lösung übernehme ich keine Haftung ;P
-
Spooky du bist der Beste. Das klappt wunderbar, besser gehts nicht. Danke nochmal!!