Position Fixed

[Cc_Cc_Cc]

Tag,

Am Anfang könnt ihr sehen, dass die Box direkt neben den Beiträgen angezeigt wird. Aber später beim Scrollen mittig.

Danach könnt ihr sehen, dass die Box oben angezeigt wird,(ganz oben) , dass sollte nicht sein, aber wenn man scrollt, sieht man dass die box genau oben und neben den Beiträgen ist, das sollte genau so sein.

Wie kann ich es jetzt machen das die box direkt neben den Beiträgen angezeigt wird und später beim Scrollen ebenso oben?

Code:

 Spoiler

<article id="box1">
<p>username</p>
<p>likes</p>
</article>

<article id="box2">
<p>Test TEST (das soll die fixierte box sein) </p>
</article>

Css:

 Spoiler

main #box1 {
	display:inline-block;
	margin:0em auto;
	width:70%;
	margin-left:1em;
	margin-right:1em;
	vertical-align:top;
}

BSP 1 (erster Abschnitt im Video
main #box2 {
	display:inline-block;
	width:25%;
	vertical-align:top;
	margin-left:-4px;
	background:#fff;
	margin-top:2em;
	position:fixed;
	// top:0; // 
}

BSP 2 (Letzer Abschnitt im Video)
main #box2 {
	display:inline-block;
	width:25%;
	vertical-align:top;
	margin-left:-4px;
	background:#fff;
	margin-top:2em;
	position:fixed;
	top:0;
}

[Lucky´s]

Dein Problem ist, dass die fixed position nunmal fixed ist.


Um zu erreichen, dass deine Box ab einer bestimmten Höhe "hängen" bleibt (also nicht weiter als der erste Beitrag rutscht), kannst du dir mit Javascript helfen.

Mit Jquery kannst du z.B. den aktuellen "gescrollten Weg" mit abfragen - dann einfach ab einem gewissen Punkt auf fixed schalten.