Fixed Header. Header soll mitscrollen

**BrainStormer** · 11.04.2017, 12:03

Hallo an alle,
es geht eigentlich um eine (wie ich glaube) simple Augabe. Ich will einfach das mein Header die ganze Zeit stehen bleibt und die anderen Elemente drunter weg scrollen.
Es gibt dazu ja auch schon einiges in dem Forum und ich bin da auch fündig geworden und hab auch schon die ersten "Erfolge" gemeistert, leider fehlt mir da glaube ich aber irgendwo noch eine KLeinigkeit.
Zu der generellen Vorgehensweise: Ich wollte das über CSS und nicht JS lösen, da ich von JS wenig bis keine Ahnung habe und das für die weitere Verwendung und Anpassung kompliziert wäre.

Bisher habe ich folgendes:
In meinem Header habe ich eine Klasse "bangb1" und der hab ich folgendes CSS zugeschrieben:

HTML-Code:

.bangb1 {
    position:fixed;
    width:100%;
    z-index: 120
}

Dadurch hab ich ja das Problem, dass das Element nach dem Header nach oben rutscht und der Header über dem nächsten Element (nennen wir es Element2) liegt. Also hab ich noch eine weitere Formatdefinition:

HTML-Code:

.abheader {
    margin-top:165px;
}

Diese wollte ich dann immer im Element2 einbinden.

Jetzt kommt aber das Problem, dass ich oben einen weißen Rand habe mit den 165px und der HEader immernoch über dem Element2 liegt.

Hat da jemand abhilfe?

Lg

**Fehrmann** · 11.04.2017, 12:57

Ungetestet: Probier mal der Klasse .bangb1 ein "top:0;" mitzugeben (damit wäre er oben verankert)

Ansonsten nehmen wir auch gerne einen Link zur Seite falls möglich.

Viele Grüße
René

**BrainStormer** · 11.04.2017, 13:04

Oh man... da sieht man den Wald vor lauter Bäumen nicht mehr.
Ich hatte das mal drinne und dann irgendwann gelöscht.
Klappt. Danke für die schnelle Antwort!

**BrainStormer** · 11.04.2017, 14:41

Ich muss hier nochmal einhaken. Auf der normalen Website sieht das alles gut aus. Aber noch nicht auf der mobilen. Das liegt wahrscheinlich an den Margin von 165px, da es auf der mobilen weniger sind. Wie könnt ich das denn lösen ?
Lg

Gesendet von iPhone mit Tapatalk