[Javascript] <div>Container erst nach scrollen fixed positionieren

[Dj-Darkside]

So liebe Pro Gemeinde,

ein neuer Tag ein neues Problem.
Ich bin zwar nicht der schlechteste in Javascript. Aber mit manchen Sachen befasst man sich halt erst später

Nun kurzer bsp Aufbau:


<style>
#cont{
position: relative;
width: 100%;
}

#right_cont{
position: absolute;
right: 0;
width: 10%;
</style>

<div id="cont">
<div id="right_cont"></div
</div>

Problem ist jetzt das der Container "cont" weiter unten ist und unendlich gefüllt wird.
"right_cont" ist das Menü rechts. Und es soll erst im "cont" bleibem bis die scroll position am "cont" angelangt ist soll das Menü gefixt werden.

Habs mit scrollTop versucht auszulesen aber das Ergebniss war immer 0.

Wisst ihr vielleicht etwas?

 

[Pill]

Du brauchst wahrscheinlich offsetTop und scrollTop, um den Abstand zum Bildschirmrand herauszufinden. Du musst natürlich auch wissen, was in welchem div scrollt. Wenn z.B. nicht in "cont" gescrollt wird, sondern im body oder im darüberliegenden div, dann gibt scrollTop für "cont" auch keinen Wert aus.

Hier mal ein Ansatz:

function adjustTop(){
	var element = document.getElementById('right_cont');
	var scroll = document.getElementById('cont').scrollTop;
	var top = element.offsetTop;
	var diff = scroll - top;
	
	if (diff >= 0){
		element.style.top = scroll + "px";
	} else {
		element.style.top = "200px";
	}
}

 

[Dj-Darkside]

Hey danke für die Antwort, genau dieser Denkanstoß fehlte mir

hab jetzt das ganze mit JQuery verfeinert:

$(window).scroll( function() {
    if ($(this).scrollTop() > 980) {
        $('#time_line').css("position", "fixed");
        $('#time_line').css("top", "0px");
    } else {
        $('#time_line').css("position", "absolute");
        $('#time_line').css("top","86px");
    }
});