Ein DIV Bereich ganz oben und soll wenn man runter-scrollt verschwinden

W

wahke

Grünschnabel
Guten Tag,
Ich habe ein kleines Problem und will ich ein div bereich über mein menü erstellen

Screenshot_1.png

und eben dadrüber soll

Screenshot_2.png

so eine leiste wo ich die Sprache auswählen kann und die USt.:

hab mal alle dateien auf GitHub hochgeladen glaub das wäre das einfachste

wahke/website

Ich würde mich freuen ob jemand mir helfen könnte
 
Lösung
basti1012
habe nee halbwegs vernünftige Lösung gefunden.
Vieleicht hat ja wer anders nee bessere idee

Du läst erstmal alles so wie es jetzt ist
Dann schreibst du das an Ende der css Datei oder änderst die bei der bootstrap css

Code: 
.container {
    margin-top: 20px;
}

Dann schreibst du bei deiner style.css noch die margin zeile dazu, so das es so aussieht
Code: 
body.scrolled #header .navbar {
    padding-top: 0;
    margin-top: -20px;
    background-color: #303030;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.28);
}

So sieht es gut aus und ist nicht so gefuscht ,
obwohl ich negative margin Werte eigentlich nicht mag.

Nur ohne alles umzubauen fällt mir jetzt keine Lösung ein ohne da noch Javascript zuzubauen...
einfacher wäre gewesen nur eine Seite bei Codepen zu erstellen.
Aber wo ist dein dein problem. Du erstellst einen Container vor den header dann sollte der cotainer ja schon oben sein wenn die css passt. Den container gibst du dann position:fixed dann ist er immer zu sehen da oben.

Oder meinst du das jetzt anders ?
Oder brauchst du die ganze Sprachauswahl auch noch ?
 
Na klappt aber irendwie nicht =/ ,
ich wollte wenn man auf die Seite kommt das dieser div container
screenshot_2-png.66050

überhalbt meines menü kommt und wenn ich runter scrolle soll nur dieser Container wieder verschwinden
 
das sollte ja eigentlich einfach sein wenn du den Container direkt nach den body einbindest und den dann position: relative gibst. ( falls die restliche css so mitspielen sollte )
Beim scrollen geht er dann ganz normal weg wie es beim header oder sonst was auch sein sollte.

Aber einfacher wäre es wenn du mal ein Link zur Seite hast , vieleicht benutzt du da ja irgendein System wo das doch nicht so einfach ist.
 
So habe jetzt dein Link gefunden.
Ich habe mal direkt nach dem <body> ein Ordner rein gemacht ( mit inline style weil es in der Console schneller geht )
Code: 
<div id="basti" style="position:relative;top:0;left:0;height:30px;width:100%;border:3px solid red;background:green;z-index:99999">testordner  für Sprachauswahl</div>
Der ist dann ganz oben, und beim Scrollen ist er weg .Beim Hoch scrollen kommt er dann natürlich auch wieder.
Genau so wie du wahrscheinlich wolltest, und ich brauchte nicht mal was an deiner Css ändern.

Probier das doch mal aus. Falls es nicht geht lass den Ordner dann mal da drinne dann kann man das besser sehen was da los ist als wenn man über die Console da selber Ordner rein fummelt muß
 
Zuletzt bearbeitet:
So , anworte jetzt hier weil die anderen wollen ja auch wissen wie es weiter geht.
Habe gesehen das du den Container da rein kopiert hast von mir.
Der Container ist jetzt genau da wo ich ihn erwartet habe und genau so wie du es beschrieben hast.

Ich denke mal das du an deinen Browser vieleicht einmal die Cache löschen solltest, weil bei mir sieht es gut aus.

Du solltest vieleicht auch mal den Link hier posten dann können andere auch kucken wie es aussehen tut.
Vieleicht verstehe ich dich auch falsch und deswegen sieht es nicht so aus wie du es wolltest .
 
Zuletzt bearbeitet:
Ok , es ist fast richtig bei mir verdeckt es leider das Logo und die menübar einwenig
-> Download (2).png


es müsste dann irgendwie so sein das alles aber von dem unteren sichbar ist
 
also den Container in den vorhandenen Code einzubauen klaut mir den letzten Nerv.
Hättest du Flexbox wäre es kinderkram.

Habe jetzt 3 möglichkeiten gefunden ,ohne das komplett umzubauen die aber nicht Fehlerfrei sind.
du könntest den body ein befor geben mit der größe des neuen Containers,

Oder den header anstatt top:0 den top von der höhe des Containers geben. dann bleibt aber ein größeren Balken den man mit postion:sticky schönn verstecken könnte. Aber leider bleibt die navigation da nicht kleben wo es sein sollte.Warum habe ich noch nicht raus gefunden.

Ich ,kucke mal weiter ab es da noch was besseres gibt .
Muss erstmal deine Scripte durchsuchen weil ich den weißen hintergrund nicht finde.
Und warum der Body beim Srollen eine neue Classe kriegt kann ich auch noch nicht ganz nachvollziehen.

Keiner hier der da etwas schneller durchblickt ?
 
habe nee halbwegs vernünftige Lösung gefunden.
Vieleicht hat ja wer anders nee bessere idee

Du läst erstmal alles so wie es jetzt ist
Dann schreibst du das an Ende der css Datei oder änderst die bei der bootstrap css

Code: 
.container {
    margin-top: 20px;
}

Dann schreibst du bei deiner style.css noch die margin zeile dazu, so das es so aussieht
Code: 
body.scrolled #header .navbar {
    padding-top: 0;
    margin-top: -20px;
    background-color: #303030;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.28);
}

So sieht es gut aus und ist nicht so gefuscht ,
obwohl ich negative margin Werte eigentlich nicht mag.

Nur ohne alles umzubauen fällt mir jetzt keine Lösung ein ohne da noch Javascript zuzubauen.


Aber warte es erstmal ab vieleicht hat wer noch nee bessere Idee
 
Lösung
Vielen dank , sorry das ich erst jetzt antworte ...

Ich probiere das mal aus und schaue dann mal weiter

MfG
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück