JS div ab bestimmter position mitscrollen?

Ist es möglich mit JS oder ähnlichem die position zu ermitteln, die man grad im browser sieht? (also z.B. wenn man n stück nach unten gescrollt hat den abstand dessen was man an der oberen kante des browserfensters sieht, zur tatsächlichen oberen kante der page ermitteln)

geht darum die Seitenspalten ab einer bestimmten position mitscrollen zu lassen (wenn der content noch dementsprechend n ganzes stück weitergeht als die seitenspalten)
will die seitenspalten aber nicht komplett fixieren, weil man sonst mit sowas wie innenliegenden scrollbalken (würg) arbeiten müsste um die noch komplett einsehen zu können.

also nochmal zusammengefasst
Ich scrolle auf der page nach unten und n stück nach der stelle, wo links und rechts die seitenspalten aufhören und nur noch in der mitte der content weiterläuft, sollen die Seitenspalten wie man sie grad im blick hatte mitscollen.

ja, sollte möglich sein, habe schon viele Scripte gesehen, die eine Navigationsleiste dynamisch verschieben :wink:

die sachen die ich in die richtung gefunden hab sind jedes mal fest positioniert.
Hab noch nix gefunden was ungefähr auf das passt was ich will.

ich hab auch schon ne grobe vorstellung wie das funktioniert aber bei mir scheiterts am umsetzen weil ich mich nur ansatzweise mit JS beschäftige.

mit window.pageYOffset krieg ich ja den abstand zur oberen Kante.
also müsste das ganze über ne funktion laufen, die sobald der wert ein maximum überschreitet die div elemente mitscrollt und das ganze rückgängig macht wenn der wert wieder kleiner ist.

kann man css positionseigenschaften mit JS beeinflussen nachdem die seite aufgerufen wurde? oder muss das scrollen dann auch komplett über JS laufen?

Man kann über js das css verändern, also zum Beispiel die Position:

oder halt statt 30px eine Variable angeben

document.getElementById("seitenleiste").style.top = "30px";

Anführungszeichen sind wichtig :wink:

so hab mich jetzt mal n bisschen informiert und mir ne funktion geschrieben die aber nicht funktioniert :smiley:

zum ersten wo liegt der Fehler dabei
zum 2. an was genau soll ich das ausführen der Funktion dann Festmachen, das ganze muss ja eig. entweder ständig laufen und die scrollhöhe überprüfen oder nur jedesmal wenn gescrollt wird (weiß nicht ob und wie man überprüft ob gescrollt wird

<script language="JavaScript"> function barscoller() { var lbarheight = leftbar.offsetHeight; var rbarheight = rightbar.offsetHeight; var maxheightl = '300px' + lbarheight - window.innerHeight; var maxheightr = '300px' + rbarheight - window.innerHeight; if (window.pageYOffset > maxheightl) document.getElementById("leftbar").style.top = '300px' + window.pageYOffset - maxheightl; if (window.pageYOffset > maxheightr) document.getElementById("rightbar").style.top = '300px' + window.pageYOffset - maxheightr; } </script>

die div mit den ids leftbar und rightbar sind in ner css datei mit position: absolute und top: 300px festgelegt.

das was ich in der Funktion vorhatte war erst die höhe der divs zu ermitteln weil der content in ihnen dynamisch ist (beim ermitteln der höhe vermute ich schon den ersten fehler wusste aber nicht genau wie das machbar ist)
die maximale Höhe die man auf der page nach unten scrollen kann bevor die jeweilige seitenspalte aufhört hab ich mit den 300 px abstand oben + die höhe der div - die fensterhöhe (weil es sich ja am unteren Ende der div orientieren soll und nicht am oberen).
Überschreitet nun die scrollhöhe den maximalwert einer der seitenspalten soll bei dieser der absolute abstand nach oben um diese Differenz erhöht werden. somit scrollt die spalte mit, sobald man bis zu ihrem ende gescrollt ist.

Wo liegt der Fehler in meiner Funktion bzw. wenn sie müll ist wie kann man das sinnvoller umsetzen, wo positionieren (head, body?) und wie aufrufen.

var maxheightl = '300px' + lbarheight - window.innerHeight;
var maxheightr = '300px' + rbarheight - window.innerHeight;

du kannst keine strings addieren :wink:

var maxheightl = 300 + lbarheight - window.innerHeight;
var maxheightr = 300 + rbarheight - window.innerHeight;

xD

<script language="JavaScript"> function barscoller() { var lbarheight = leftbar.offsetHeight; var rbarheight = rightbar.offsetHeight; var maxheightl = 300 + lbarheight - window.innerHeight; var maxheightr = 300 + rbarheight - window.innerHeight; if (window.pageYOffset > maxheightl) { var ldiffer = 300 + window.pageYOffset - maxheightl; document.getElementById("leftbar").style.top = ldiffer + 'px'; } if (window.pageYOffset > maxheightr) { var rdiffer = 300 + window.pageYOffset - maxheightr; document.getElementById("rightbar").style.top = rdiffer + 'px'; } } </script>

so besser?
funktioniert aber immer noch nich bzw. das problem wann das ganze gestartet werden soll.
geben window.innerHeight offsetHeight und window.pageYOffset eigentlich Zahlenwerte oder auch Einheiten zurück bzw. könnte das der Grund für sein dass die If abfrage nicht angesprungen wird?

verwende mal statt einfach nurleftbarlieberdocument.getElementById("leftbar")
@michi7x7: ja, Anführungszeichen sind ab und an ganz hilfreich o.0

hab ich gerade in der Lightbox gefunden:

function getPageScroll(){

	var yScroll;

	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
	}

	return yScroll;
}

hoffe das hilft :wink:

thx

hm aber die Funktion selbst scheint immer noch nicht zu funktionieren

<script language="JavaScript"> function barscoller() { var lbarheight = document.getElementById("leftbar").offsetHeight; var rbarheight = document.getElementById("rightbar").offsetHeight; var maxheightl = 300 + lbarheight - window.innerHeight; var maxheightr = 300 + rbarheight - window.innerHeight; if (window.pageYOffset > maxheightl) { var ldiffer = 300 + window.pageYOffset - maxheightl; document.getElementById("leftbar").style.top = ldiffer + 'px'; } if (window.pageYOffset > maxheightr) { var rdiffer = 300 + window.pageYOffset - maxheightr; document.getElementById("rightbar").style.top = rdiffer + 'px'; }; } </script>

hab zum test die Funktion onload aufgerufen und in die funktion noch nen eigenaufruf im abstand von 1 s eingebaut

tut sich aber nix

funktion aus dem code oben ist im head bereich
die div mit der id leftbar und rightbar im body bereich und über die id ist in ner CSS datei die position definiert (position: absolute; top: 300px; und je nach spalte left:0px oder right: 0px)

Wie du in meiner Funktion siehst, gibt es mehrere möglichkeiten die Höhe auszulesen.
Weil aber nicht jeder Browser jede unterstützt, musst du wohl auf alle abfragen :wink:

[code] [/code]

tut sich auch nix :frowning:

kann man mit irgendwas überprüfen ob sich JS seitig was wo wann tut?

Firefox-Fehlerkonsole zum Beispiel :wink: