it-swarm.com.de

Wie kann ich Inhalte unter einem festen DIV-Element anzeigen lassen?

Meine Absicht ist es, ein Menü oben auf der Seite zu erstellen, das auch dann oben angezeigt wird, wenn der Benutzer einen Bildlauf vornimmt (z. B. die zuletzt verwendete Funktion von Google Mail, bei der die häufig verwendeten Schaltflächen mit dem Benutzer nach unten verschoben werden, sodass sie die Funktion ausführen können Vorgänge für Nachrichten, ohne zum oberen Seitenrand blättern zu müssen).

Ich möchte auch den Inhalt unterhalb des genannten Menüs so einstellen, dass er darunter erscheint - derzeit erscheint er dahinter.

Ich strebe so etwas an:

+________________________+
|          MENU          | <--- Fixed menu - stays at top even when scrolling.
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+
|     CONTENT BEGINS     |
|          HERE          |
|                        |
|                        |
|                        |
|                        |
|                        |
|                        |
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+   <--- Bottom of page.

Ich hoffe, dass sich das Menü oben befindet, das sich niemals bewegt und oben auf der Seite bleibt, auch wenn der Benutzer nach unten blättert. Ich schaue auch an, dass der Hauptinhalt unterhalb des Menüs beginnt, wenn sich der Benutzer oben auf der Seite befindet. Wenn der Benutzer jedoch einen Bildlauf nach unten durchführt, ist es unerheblich, ob das Menü den Inhalt übersteigt.

Zusammenfassung:

  • Ich möchte ein festes Positionsmenü oben auf der Seite haben, das dem Benutzer beim Scrollen folgt.
  • Der Inhalt muss NUR UNTEN im Menü angezeigt werden, wenn sich der Benutzer oben auf der Seite befindet.
    • Wenn der Benutzer nach unten blättert, überlappt das Menü möglicherweise den Inhalt.

Kann jemand bitte erklären, wie das zu erreichen ist?

Vielen Dank.

UPDATE:

CSS-Code:

#floatingMenu{
clear: both;
position: fixed;
width: 85%;
background-color: #78AB46;
top: 5px;
}

HTML Quelltext:

<div id="floatingMenu">
    <a href="http://www.google.com">Test 1</a>
    <a href="http://www.google.com">Test 2</a>
    <a href="http://www.google.com">Test 3</a>
</div>  

Derzeit kann ich das Menü oben auf der Seite und zentriert anzeigen lassen, indem ich es in meine containerdiv setze. Der Inhalt geht jedoch hinter das Menü. Ich habe clear: both; eingestellt und das hat nicht geholfen.

43
MusTheDataGuy

Was Sie brauchen, ist ein extra Abstand div (soweit ich Ihre Frage verstanden habe).

Dieses div wird zwischen Menü und Inhalt eingefügt und hat die gleiche Höhe wie das Menü div, einschließlich Füllungen.

HTML

<div id="fixed-menu">
    Navigation options or whatever.
</div>
<div class="spacer">
    &nbsp;
</div>
<div id="content">
    Content.
</div>

CSS

#fixed-menu
{
    position: fixed;
    width: 100%;
    height: 75px;
    background-color: #f00;
    padding: 10px;
}

.spacer
{
    width: 100%;
    height: 95px;
}

Siehe mein Beispiel hier .

Dies funktioniert, indem der Raum ausgeglichen wird, den das nav-div belegt hätte, aber da es position: fixed; hat, wurde es aus dem Dokumentenfluss genommen.


Die bevorzugte Methode zum Erreichen dieses Effekts ist die Verwendung von margin-top: 95px;/*your nav height*/ auf Ihrem Content-Wrapper.

45
Kyle

Wenn Ihre Menühöhe variabel ist (für die Reaktionsfähigkeit oder weil sie dynamisch geladen wird), können Sie den oberen Rand so einstellen, dass das feste div endet. Zum Beispiel:

CSS

.fixed-header {
    width: 100%;
    margin: 0 auto;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 999;
}

Javascript

$(document).ready(function() {
    var contentPlacement = $('#header').position().top + $('#header').height();
    $('#content').css('margin-top',contentPlacement);
});

HTML

...
<div id="header" class="fixed-header"></div>
<div id="content">...</div>
...

Hier ist eine Geige ( https://jsfiddle.net/632k9xkv/5/ ), die mit einem festen Nav-Menü und Header etwas weiter geht, um dies hoffentlich zu einem nützlichen Beispiel zu machen.

13
grdevphl

Ich hatte gerade damit zu kämpfen und einige der "hackier" -Lösungen nicht zu mögen. Ich fand das nützlich und sauber:

#floatingMenu{
  position: sticky;
  top: 0;
}
7
ahanusa

Ich hatte gerade dieses Problem und dies war meine Lösung:

#floatingMenu + * {
    margin-top: 35px;
}

Stellen Sie die Höhe Ihres FloatingMenu ein. Wenn Sie nicht genau wissen, dass es sich um ein div-Element handelt, können Sie * anstelle von div verwenden. Dies ist alles gültige CSS2.

5
Danimal

Wickeln Sie den Menüinhalt mit einem anderen div:

<div id="floatingMenu">
    <div>
        <a href="http://www.google.com">Test 1</a>
        <a href="http://www.google.com">Test 2</a>
        <a href="http://www.google.com">Test 3</a>
    </div>
</div>

Und das CSS:

#floatingMenu {
    clear: both;
    position: fixed;
    width: 100%;
    height: 30px;
    background-color: #78AB46;
    top: 5px;
}

#floatingMenu > div {
    margin: auto;
    text-align: center;
}

Und über Ihre Seite unter dem Menü können Sie auch ein Auffülloberteil hinzufügen:

#content {
    padding-top: 35px; /* top 5px plus height 30px */
}
2

Ich mochte grdevphls Javascript-Antwort am besten, aber in meinem eigenen Anwendungsfall fand ich, dass die Verwendung von height() in der Berechnung immer noch eine kleine Überlappung hinterließ, da das Auffüllen nicht berücksichtigt wurde. Wenn Sie auf dasselbe Problem stoßen, versuchen Sie stattdessen outerHeight(), um das Auffüllen und den Rand auszugleichen.

$(document).ready(function() {
    var contentPlacement = $('#header').position().top + $('#header').outerHeight();
    $('#content').css('margin-top',contentPlacement);
});
2
Ty Mick

Ich habe dem Div unter dem Nav gerade ein Polster hinzugefügt. Ich hoffe es hilft. Ich bin neu bei diesem Thema. C:

#nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background: url(../css/patterns/black_denim.png);
    z-index: 9999;
}

#container {
    display: block;
    padding: 6em 0 3em;
}
2
user4852538

Für diejenigen, die die Verwendung von margin-top oder padding-top vorschlagen, um die Hauptunterteilung unter das feste Menü zu verschieben - Sie scheinen es nicht vollständig zu testen.

Wenn Sie einen Rand oder ein Auffüllen festlegen, wird mit der Seite gescrollt, und Sie verlieren Zeilen. Versuchen Sie es mit diese Seite

Sieht gut aus, nicht wahr? Markieren Sie ein Wort in der untersten sichtbaren Zeile und drücken Sie die Bild-ab-Taste. Die Zeile mit dem hervorgehobenen Wort und einige andere Zeilen werden unter der festen Unterteilung verschoben.

Oben am Rand oder oben am Rand platzieren WIRD die Hauptteilung unter der festen Abteilung, aber alles fällt flach auf die Fläche, wenn Sie nach unten blättern oder auf die Bildlaufleiste klicken, um eine Ansichtsfensterhöhe der Seite zu scrollen.

Dasselbe Problem, wenn Sie blättern, "fallen" Linien am unteren Rand des Ansichtsfensters ab.

Hat jemand eine tatsächliche Lösung für dieses Problem?

Ich weiß, wie man Dinge positioniert - das ist ziemlich einfach, wenn man die Grundlagen über Ränder, Abstände usw. kennt - aber wie kann man den Zeilenverlust beim Scrollen verhindern?

Ich habe mir viele Beispiele angesehen, von denen behauptet wird, dass sie richtig funktionieren und die oben feste Unterteilungen haben, aber sie funktionieren nicht! Sie alle haben Probleme beim Scrollen.

Ich habe festgestellt, dass einige Seiten anscheinend funktionieren, aber wenn die feste Unterteilung höher ist, gehen Zeilen verloren. Ich glaube zu wissen, warum sie zu funktionieren scheinen.

Stellen Sie sich vor, wie Text auf einer ganz normalen Seite (ohne ausgefallene Formatierung) gescrollt wird. Sehen Sie die unterste Zeile, wenn Sie nach oben scrollen, oder sehen Sie die nächste Zeile - die unterste, die vom oberen Rand des Ansichtsfensters gescrollt wurde?

Antwort - Sie sehen, dass die unterste Zeile in die oberste Zeile verschoben wurde.

Die festen Menüseiten, die zu funktionieren scheinen, funktionieren nicht wirklich. Scrollen Sie mit ihnen und die unterste Zeile wird aus dem Ansichtsfenster gescrollt, aber da die nächste Zeile sichtbar ist, scheint die feste Unterteilung zu funktionieren - aber wir wissen es besser, nicht wahr?

Wenn die feste Unterteilung höher als die Höhe einer Textzeile ist, schlagen sie fehl und Zeilen gehen verloren.

Die einzigen Seiten, die ich gesehen habe, die tatsächlich richtig funktionieren, befinden sich auf Websites wie Yahoo und ich habe weder die Zeit noch die Neigung, mich mit viel CSS, HTML und JavaScript auf den Seiten vertraut zu machen zum Kern der Sache.

Gehen Sie also zu dieser Seite und prüfen Sie, ob Sie Änderungen vornehmen können ("inspizieren" Sie die Elemente und nehmen Sie Änderungen an den CSS-Regeln vor), um die Bildlaufprobleme zu beheben.

Wenn du kannst, komm zurück und teile deine Entdeckung mit der Welt.

Auf meiner Seite können Sie gut nachsehen, was erforderlich ist, um eine Unterteilung oben zu fixieren, sie (und die Hauptunterteilung) zu zentrieren und auf eine maximale Breite zu beschränken. Es mag einigen von Ihnen helfen, aber es tut mir leid, dass ich keine Lösung für das Bildlaufproblem habe

Spielen Sie mit der Höhe der festen Unterteilung - machen Sie es kurz genug, sodass nur eine Zeile angezeigt wird, und spielen Sie dann mit dem Bildlauf. Dann machen Sie es groß genug für zwei Zeilen und dann drei und spielen Sie mit dem Scrollen. Sie werden die Probleme sehen.

Hier ist eine Seite das soll funktionieren, aber es funktioniert nicht - lies den allerletzten Kommentar - sie beschreiben das Problem auf eine andere Art, aber es ist das gleiche Problem

Ich habe die Seite gerade noch einmal in Chrome und es scheint ziemlich zufriedenstellend zu funktionieren. Mit FF besteht das Problem. Habe noch nicht versucht IE noch einmal.

Also - was ist anders bei FF?

Hier ist eine Seite bei cNet welche funktioniert mit chrome und ff - also was machen sie?

Weitere Tests mit Chrome zeigen, dass die unterste Zeile beim Scrollen nicht vollständig angezeigt wird. Nur ein Teil der untersten Zeile ist sichtbar, wenn Sie scrollen. Sie müssen also noch eine Korrektur vornehmen.

2
BobN
#nav{
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    margin: 0 auto;
    z-index: 9999;
    background-color: white;
}
1
Hassan Sarwar

Hier ist eine reaktionsschnelle Möglichkeit, dies mit jQuery zu tun.

 $(window).resize(function () {
      $('#YourRelativeDiv').css('margin-top', $('#YourFixedDiv').height());
 });

0
David Elswick

Sie sollten das Pen versuchen. Ich hoffe, das hilft Ihnen und bietet sogar mehr Funktionen für die Verwendung der festen Navigation

1 .clear:both; brauchen Sie nicht klar zu verwenden

0
shaz3e