Mehrere Top-Fixierten Divs?

Ich habe zwei divs:
-Eine Kopfzeile, die ist fixiert beim scrollen, und stecken Sie oben auf der Seite.
-Eine Benachrichtigung div, welches eine message-banner, die nach unten rutschen, wenn ausgelöst.

Die Kopfzeile ist fest mit der Oberseite fein, aber ich kann nicht scheinen, um die Benachrichtigung div fix selbst aus. Jedes mal, wenn ich versuche, diese div-Korrekturen an den oberen Rand der Seite-vor meinem header bar; scheinbar ersetzen. Polsterung scheint nicht zu helfen.

Kann jemand mir irgendwelche Vorschläge, bitte?

Hier ist der Arbeits-div:

#header {
    text-align: left;
    background-image:url(../Resources/Banner2.gif);
    background-repeat:no-repeat;
    background-color:#00ed32;
    color:#FFF;
    position:fixed;
    width:100%;
    top:0px;
    left:0px;
    padding:15px;
}

Hier ist die div, die ich gerne beheben würde es unter:

.notify {
    background: url(../resources/gradients.png) 
    repeat-x 0px 0px; 
    top: -40px; 
    left: 0px;  
    position:fixed; 
    z-index: 100; 
    width: 100%; 
    overflow: hidden;
}

können Sie zeigen einige code?
bitte teilen code.

InformationsquelleAutor Josh | 2012-05-15

9

Der einfachste Weg, dies zu tun ist, um eine "Halter" - Leiste am oberen Rand der Seite und dann nest "header" und "Benachrichtigung" - Elemente innerhalb es.

Beispiel:

CSS
```
#holder {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}

#header, .notify{
    //what ever styles you have
    //position: relative or static
}
```
HTML
```
<div id="holder">
    <div id="header">...</div>
    <div class="notify">...</div>
</div>
```
Bearbeiten

Beispiel: http://jsfiddle.net/Q6CWv/

Update

Hinzufügen einer slide-down-Effekt auf die .notify element sollte Recht geradlinig, wenn Sie mit JQuery:
```
$('.notify').slideDown();
```
Beispiel: http://jsfiddle.net/Q6CWv/1/
- Vielen Dank für Ihre Antworten. Obwohl dies etwas hilfreich war, war es nicht die beste Lösung für mich, wie wenn die Meldung tauchte nach unten, es entweder überschnitten sich die Kopfzeile, oder war es so, dass die Kopfzeile würde nicht pop nach unten, bis Sie die Benachrichtigung haben. Ja, auch wenn Sie in getrennten divs, aber das könnte mein Fehler sein. Meine Lösung war, zu gehen in das JavaScript im pop-down-Benachrichtigung und ändern Sie die "top" - Wert auf 3% der Seitenhöhe. Dies funktioniert jetzt perfekt, außer, dass der header und die notification-bar nicht korrekt ausgerichtet, wenn es extreme zoom angewendet.
- Ich bin froh, Sie finden eine funktionierende Lösung. Vergessen Sie nicht, Sie können fügen Sie Ihre eigenen Antwort auf diese Frage und akzeptieren Sie es in 48 Stunden. Dies wird anderen helfen, in der Zukunft und Ihnen helfen, zu gewinnen einige rep für alle upvotes 😉
- Ich aktualisiert meine Antwort, um zu zeigen, wie die Benachrichtigung slide-down-Effekt. Das wird funktionieren, ob Sie die #header oder nicht. Es klingt wie Sie haben, nicht haben sich nicht geändert, die position des #header und .notify Elemente aus fixed zu static
- Sie verpasste einen Doppelpunkt in left 0;. Auch ich nehme an, Sie sollten hinzufügen width zu #holder z.B. 100vw. Zumindest in meinem Fall width fehlte - habe ich width - und id hat mir geholfen, mein problem zu lösen.
InformationsquelleAutor My Head Hurts
2

Obwohl die Antwort von @MyHeadHurts etwas hilfreich war, war es nicht die beste Lösung für mich, wie wenn die Meldung tauchte nach unten, es entweder überschnitten sich die Kopfzeile oder es so gemacht, dass der header-Leiste würde nicht pop nach unten, bis Sie die Benachrichtigung haben. Ich hatte Sie in getrennten divs wie vorgeschlagen, aber das könnte mein Fehler sein.

Meine Lösung war, zu gehen in das JavaScript im pop-down-Benachrichtigung und ändern Sie die "top" - Wert auf 3% der Seitenhöhe. Dies funktioniert jetzt perfekt, außer, dass der header und die notification-bar nicht korrekt ausgerichtet, wenn es extreme zoom angewendet.

InformationsquelleAutor Josh

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Bearbeiten

Update