position fixed + absolute "max-top"

[Max]

Hallo,
ich habe eine Wunschvorstellung wie der Kopf meiner Seite aussehen soll, weiß aber nicht wie es geht und ob es überhaupt funktioniert.
Ich habe hier ein Beispiel an dem ich zeigen will, was ich mir vorstelle:

<div id="div1kopf" style="background-color:red;position:fixed;width:500px;height:300px;top:0px;z-index:3"></div>  
<div id="div2kopf" style="background-color:green;position:absolute;width:600px;height:300px;top:300px;z-index:2"></div>  
<div id="div3kopf" style="background-color:blue;position:absolute;width:700px;height:300px;top:600px;z-index:1"></div>  
<div id="div4webinhalt" style="background-color:aqua;position:absolute;width:800px;height:300px;top:900px;z-index:0"></div>

In dem Beispiel sind 4 Balken mit div erstellt worden. div1kopf ist fixed ganz oben. Div2kopf, Div3kopf und Div4Webinhalt sind absolute und lassen sich hoch scrollen. Mein Wunsch ist es, dass beim hoch scrollen Div2kopf oben hinter Div1kopf verschwinden, Div3kopf soll aber bis maximal top:300px hochgehen und nicht weiter (sprich, bis zur höhe von Div1kopf), also sozusagen max-top:300px oder so. Und Div4webinhalt soll dann auch hinter Div1kopf und div3kopf verschwinden.

Ich hoffe mein Anliegen wird mit dem Beispiel klar und natürlich dass es dafür eine Lösung gibt :)

Gruß Max

[T-Rex]

Deinen Ausführungen zufolge würde man div2 niemals sehen, da es immer hinter div1 steckt. Div3 würde man hingegen sehen, da es unter div1 positioniert wird.
Demnach musst du nur die top angaben bei div2 auf 0px setzen und bei div3 auf 300px.

Gruß
Abgedeckter

[Max]

Deinen Ausführungen zufolge würde man div2 niemals sehen, da es immer hinter div1 steckt. Div3 würde man hingegen sehen, da es unter div1 positioniert wird.
Demnach musst du nur die top angaben bei div2 auf 0px setzen und bei div3 auf 300px.

Wenn man die Seite aufruft, sollen alle 4 Divs zu sehen sein, so wie ich es mit top mit 300px abständen gesetzt habe. Das was ich möchte ist, dass beim scrollen, von den 3 letzten divs nur Div3kopf nicht mit den anderen zwei (Div2kopf und div4webinhalt) nach oben durchs scrollen verschwinden, sondern div3kopf soll (nach diesem Beispiel) bei Top:300px oben verankert werden.

Hintergrund ist, dass ich einen fixed kopf habe (div1kopf, div2kopf, div3kopf), div2kopf ist dabei ein img. Damit nehmen die 3 fixed Elemente oben viel festen Platz weg auf dem Browser fenster. Da ich auf ein fixed Kopf nicht verzichten will, kam mir halt diese Idee, dass div2kopf (das image) beim scrollen sich mit nach oben schiebt und div3kopf sich an div1kopf dranhängt, sich dabei aber nicht mit nach oben wegschiebt.

Hoffe, dass es jetzt verständlich ist :)

Gruß
Max

[T-Rex]

So wie ich es jetzt verstehe brauchst du Javascript.
Dann gibst du dem Element ein position fixed, wenn mehr als 300px gescrollt wurden und hebst es wieder auf, wenn es weniger als 300px sind.

Gruß
Wiederentdeckter
T-Rex

[Matthias Apsel]

Om nah hoo pez nyeetz, T-Rex!

Sie haben Post ;-)

Matthias

[Max]

Om nah hoo pez nyeetz, T-Rex!

Sie haben Post ;-)

hmm.. wo kann ich die Post denn anschauen? ... ich habe meine E-Mail Adresse hier nicht mit angegeben.
Hier meine E-Mail Adresse [e-mail]

Gruß
Max

[Matthias Apsel]

Om nah hoo pez nyeetz, Max!

Mein Beitrag war ist ein Antwort an T-Rex, erkennbar an der Anrede. Wenn du das Forum in der nested-Ansicht anschaust, siehst du es auch an der Einrückung.

Matthias

[Max]

Om nah hoo pez nyeetz, Max!

Nach "Om nah hoo" hatte ich aufgehört zu lesen.

Mein Beitrag war ist ein Antwort an T-Rex, erkennbar an der Anrede. Wenn du das Forum in der nested-Ansicht anschaust, siehst du es auch an der Einrückung.

Jetzt wo du es angesprochen hast, sehe ich es in der Anrede: den Namen.
Aber ich sag mal so, es gibt Anreden wo es etwas deutlicher ersichtlich ist an wen diese gerichtet ist:
@Matthias Apsel
Hallo Matthias Apsel
als Beispiel.

Gruß Eugen

[1UnitedPower]

Meine Herren!

Aber ich sag mal so, es gibt Anreden wo es etwas deutlicher ersichtlich ist an wen diese gerichtet ist:

Diese Anrede ist hier im Forum sowas wie 'ne Tradition, und wie bei einer echten Tradition, weiß keiner mehr so genau, woher sie eigentlich kommt ;)

[Max]

Meine Herren!

Aber ich sag mal so, es gibt Anreden wo es etwas deutlicher ersichtlich ist an wen diese gerichtet ist:

Diese Anrede ist hier im Forum sowas wie 'ne Tradition, und wie bei einer echten Tradition, weiß keiner mehr so genau, woher sie eigentlich kommt ;)

hihi, find ich gut ^^
war mir aber nicht klar, bin neu hier :P

Gruß
Max

[T-Rex]

Diese Anrede ist hier im Forum sowas wie 'ne Tradition, und wie bei einer echten Tradition, weiß keiner mehr so genau, woher sie eigentlich kommt ;)

!!!! petaQ !!!!!

Gruß
Data beim Schachspiel schlagender
T-Rex

[Der Martin]

Hallo,

Mein Beitrag war ist ein Antwort an T-Rex, erkennbar an der Anrede. Wenn du das Forum in der nested-Ansicht anschaust, siehst du es auch an der Einrückung.
Jetzt wo du es angesprochen hast, sehe ich es in der Anrede: den Namen.

noch deutlicher sieht man es eigentlich im Threadbaum. Dort erkennt man auf einen Blick, welcher Beitrag auf welchen anderen antwortet - das ist eines der Merkmale, die ich an diesem Forum so mag.

Aber ich sag mal so, es gibt Anreden wo es etwas deutlicher ersichtlich ist an wen diese gerichtet ist:

Gibt es, keine Frage. Aber selbst völlig ohne Anrede wäre es an der Struktur klar erkennbar.

Ciao,
 Martin

[bubble]

Gibt es, keine Frage. Aber selbst völlig ohne Anrede wäre es an der Struktur klar erkennbar.

Einer der Gründe warum ich Anreden meist weg lasse (ein weiterer ist allerdings, dass ich nie weiß welche ich nehmen soll).

MfG
bubble

[Max]

So wie ich es jetzt verstehe brauchst du Javascript.
Dann gibst du dem Element ein position fixed, wenn mehr als 300px gescrollt wurden und hebst es wieder auf, wenn es weniger als 300px sind.

Das habe ich schon befürchtet. Habe von Javascript keine Ahnung. Schade, wenns denn nicht anders geht. Trotzdem Danke für die Antworten.

Gruß
Max

[Matthias Apsel]

Om nah hoo pez nyeetz, Max!

Hintergrund ist, dass ich einen fixed kopf habe (div1kopf, div2kopf, div3kopf), div2kopf ist dabei ein img.

Was ist denn mit den beiden anderen? Ich bin sicher, dass sich aus den 3 div-Elementen ein header-Element machen lässt.

Lies auch dies.

Matthias

[Max]

Om nah hoo pez nyeetz, Max!

Buenos Dias, Matthias.

Hintergrund ist, dass ich einen fixed kopf habe (div1kopf, div2kopf, div3kopf), div2kopf ist dabei ein img.

Was ist denn mit den beiden anderen? Ich bin sicher, dass sich aus den 3 div-Elementen ein header-Element machen lässt.

Hier Auszug vom Code (dürfte dir bekannt vor kommen ^^)
Letzter Hinweis zu meinem Wunsch: Wenn Seite frisch geladen ist, dann muss man oben alles sehen: h1, img, nav, div
Wenn man nach ganz unten scrollt, so mein Wunsch, soll man von oben sehen: h1, nav, Teil des unteren divs.

<!DOCTYPE html>  
<html lang="de">  
<head>  
<meta charset="UTF-8">  
<title>Intranet</title>  
<link href="css/formate.css" rel="stylesheet" type="text/css">  
</head>  
  
<body>  
<header>  
	<h1>Willkommen im Intranet</h1>  
	<img class="bild" src=pix/t720s.jpg alt="Logo Startseite defekt">  
	<nav  class="kopfnav">  
		<a class="kopflinks" href="default.htm" target="_self">Startseite</a>  
		<a class="kopflinks" href="default.htm" target="_self">Startseite</a>  
		<a class="kopflinks" href="default.htm" target="_self">Startseite</a>  
		<a class="kopflinks" href="default.htm" target="_self">Startseite</a>  
		<a class="kopflinks" href="default.htm" target="_self">Startseite</a>  
		<a class="kopflinks" href="default.htm" target="_self">Startseite</a>  
		<a class="kopflinks" href="default.htm" target="_self">Startseite</a>  
		<a class="kopflinks" href="default.htm" target="_self">Startseite</a>  
	</nav>  
</header>  
<div id="div4webinhalt" style="background-color:red;height:2000px"></div>  
</body>  
  
</html>  

body {  
	margin: auto;  
	width: 1000px;  
	font-family: Arial;  
	background-color: white;  
}  
  
header {  
	position:fixed;  
	margin:inherit;  
	z-index:100;  
	background-color:white;  
	top: 0;  
}  
  
  
h1 {  
	margin-bottom:4px;  
	margin-top:0px;  
	text-align:center;  
	font-family: "Leelawadee";  
}  
  
img.bild {  
	display:block;  
	margin:inherit;  
	width:1000px;  
	height:150px;  
}  
  
nav.kopfnav {  
	white-space:nowrap;  
	text-align:center;	  
	background-color:#cc7700;  
	height:34px;  
	margin:inherit;  
	margin-top:0px;  
}  
  
a.kopflinks {  
	background-color:#ff9900;  
	text-decoration:none;  
	display: inline-block;  
	border-radius: 0 0 15px 15px;  
	width: 11%;  
	padding: 1px 3px 1px 2px;  
	transition: .5s 0s;  
	border: 3px #c7c7c7 solid;  
	border-top: none;  
	color:black;  
}  
  
a.kopflinks:hover, a.kopflinks:focus {  
	background-color:red;  
	text-shadow: 1px 1px 1px Gray;  
	padding-bottom: 10px;  
	transition: .3s;  
	outline: none;  
	font-weight:bold;  
}  
  
  
  

Lies auch dies.

Habe dort nichts gefunden was mir helfen könnte.

Gruß
Max

[Matthias Apsel]

Om nah hoo pez nyeetz, Max!

Hier Auszug vom Code (dürfte dir bekannt vor kommen ^^)

Warum sollte er?

Die Klasse für die a-Elemente sind überflüssig, target ebenso.

Lies auch dies.
Habe dort nichts gefunden was mir helfen könnte.

Wenn du die divs schon ersetzt hast, …

Matthias

[Max]

Hallo,
ich habe eine Wunschvorstellung wie der Kopf meiner Seite aussehen soll, weiß aber nicht wie es geht und ob es überhaupt funktioniert.

Gibst denn noch eine Möglichkeit, wie man das was ich mich vorstelle hinbekommt?
Oder funktioniert das Ganze nur mit JavaScript?

Gruß
Max

[Matthias Apsel]

Om nah hoo pez nyeetz, Max!

Oder funktioniert das Ganze nur mit JavaScript?

Wenn du das Verhalten oder die Darstellung einer Seite von der Scrollposition abhängig machen möchtest, dann ja.

Du könntest schauen, wie die webkrauts das realisiert haben. Einen Artikel zum Verständnis gibts von mir, wird verwendet bei brückentage.info.

Das ist so inetwa das, was du möchtest, wenn ich dich richtig verstanden habe.

Matthias