Wie kann ich das offset, an dem meine Feste nav-bar nimmt mich mit?
Habe ich eine Feste Navigationsleiste auf meiner website bleibt an der Spitze mit links, die mich zu verschiedenen Abschnitten weiter unten auf der Seite. Da jedoch meine Feste nav-Leiste hat eine Höhe von 40px, der Anfang 40px jeder Abschnitt ist bedeckt. Wie würde ich das offset, wo meine links nimm mich bei 40px entweder mit HTML oder CSS?
Danke.
Haben Sie versucht, eine
bborisovs, das nicht funktioniert leider. Brian, interessante Frage, ich hab mich schon gewundert das auch. Glaube nicht, dass es möglich ist, wenn..
Der beste Weg für mich war, javascript zu verwenden:
top-margin: 40px;
auf den Inhalt div
?bborisovs, das nicht funktioniert leider. Brian, interessante Frage, ich hab mich schon gewundert das auch. Glaube nicht, dass es möglich ist, wenn..
Der beste Weg für mich war, javascript zu verwenden:
var shiftWindow = function() { scrollBy(0, -50) }; if (location.hash) shiftWindow(); window.addEventListener("hashchange", shiftWindow);
InformationsquelleAutor Brian | 2012-11-25
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Könnten Sie versuchen, die absolut-Positionierung "dummy" Anker 40 Pixel über der Spitze jeden Abschnitt. Sie können geben Sie null-Breite/Höhe und hidden die Sichtbarkeit zu gewährleisten, dass diese Anker nicht beeinflussen, wie Ihre Seite angezeigt wird. Wenn der Benutzer klickt auf einen der links in Ihrem festen Navigationsleiste, die Fenster Blättern Sie zu der Spitze der dummy-Anker, 40 Pixel über dem Anfang seiner eigentlichen Abschnitt.
Beispiel HTML:
Beispiel-CSS:
Für ein Beispiel, siehe http://jsfiddle.net/HV7QL/
Edit: CSS3 gehören auch die
:target
pseudo-Klasse, die für ein element, dessenid
verwiesen wird, die von derhref
einen link in das Dokument, oder der hash-Wert der URL. Sie können eine 40-pixel-Polsterung an der Spitze der:target
angewendet werden, nur der Abschnitt der Benutzer wählt aus den fixed navbar.Beispiel-CSS:
Dies ist semantisch sauberer als der oben beschriebenen Methode, aber funktioniert nicht auf älteren Browsern.
Beispiel: http://jsfiddle.net/5Ngft/
Das funktionierte, aber es ist nicht so sauber wie ich es gerne hätte. Ich genieße, Dinge zu funktionieren, aber der code könnte definitiv sauberer sein.
InformationsquelleAutor Aaron
Ich zufällig stolpern über dieses problem selbst heute, so hatte ich darüber nachgedacht, es für ein bisschen schon, aber ich glaube, ich habe gerade eine Lösung gefunden:
Hinzufügen
padding-top: 40px; margin-top: -40px
auf das element, zu dem Sie springen möchten. Die negative Marge bricht die Polsterung, aber der browser immer noch denkt, dass die Oberseite des Elements ist 40px höher als es tatsächlich ist (weil in der Tat es ist, nur der Inhalt es beginnt niedriger).Leider, dies könnte kollidieren mit bereits gesetzten Margen und Polster, und wenn Sie einen hintergrund auf die Ziel-element, es wird zu Durcheinander.
Ich werde sehen, ob kann ich das umgehen, und nach ein jsfiddle, aber in der Zwischenzeit hier ist eine einfache Antwort zumindest 🙂
bearbeitet: ich dachte, ich hätte eine Lösung für den hintergrund, aber es hat nicht funktioniert. Wieder entfernt.
endgültige Bearbeitung:
Es tut Art von Arbeit, wenn Sie wissen, die hintergrund Farbe der Verpackung-element. In meinem Beispiel, ich weiß, der text ist auf weißem hintergrund, aber die Titel haben einen silbernen hintergrund. Um zu verhindern, dass die Titel von mit einem hintergrund auf der extra-Polsterung, die wir setzen, stattdessen legte ich es auf ein pseudo-element vor:
Diese Weise die extra-Polsterung hat einen weißen hintergrund wieder, aber das funktioniert nur, wenn Sie schon wissen, welchen hintergrund es braucht. Wenn er auf transparenten zum Beispiel zeigen die zugrunde liegenden hintergrund-der Titel selbst, nicht der Artikel.
jsFiddle: http://jsfiddle.net/Lzve6/
Kapitel eins ist die Standard-Einstellung, die Sie Probleme mit.
Position zwei ist meine erste Lösung, die garantiert funktioniert auf fast allen Browsern
Position drei ist mit dem
:before
pseudo-element ist, funktioniert möglicherweise nicht auf ältere Browser.#contact{ display:block; text-align:center; margin:0 auto; background-color:rgba(255, 255, 255, 0.15); width:auto; padding:15px; margin:15px; }
Gibt es eine Möglichkeit zu kombinieren ist meine aktuelle Margen und Polsterung mit Ihren änderungen. So etwas wie
margin:-40px 0px 0px 0px auto; padding:55px 15px 15px 15px;
Sicher, aber müssen Sie fügen Sie Sie manuell. Dein Beispiel sollte funktionieren 🙂
InformationsquelleAutor Stephan Muller