jQuery "Scroll" Div in einem Div - Frage dazu

[powermax]

Hi,

habe gerade einen "to top" button erstellt, welcher je nach seitenlänge immer im Bild ist mit der Funktion Scroll (jQuery)

nun hab ich allerdings einen Punkt erreicht wo ich nicht mehr weiter weis, denn das Div stoppt. Das heißt es wandert immer weiter nach unten und das Mutterelement (div) erweitert sich ebenso.

Wie kann man verhindern das das Div weiter als bis zum vorgegeben "Rand" scrollt?

Hier der Link:

http://web680.freesurf.webhoster.ag/

Hier der Code zum Scrollen des Divs:

	$().ready(function() {
		var $scrollingDiv = $("#totop");
 
		$(window).scroll(function(){			
			$scrollingDiv
				.stop()
				.animate({"marginTop": ($(window).scrollTop() + 60) + "px"}, "slow" );			
		});
	});

Wie schon gesagt es fehlt die Einschränkung also der Befehl dem das Div sagt es soll nicht weiter nach unten wandern. Bin ich leider total überfragt

Hab nicht sonderlich viel Erfahrung mit jQuery usw. Bitte wenn einer was weis - auch wenns normalerweise nicht so laufen sollte - kleinlich erklären =) Danke für die Hilfe

[AmicaNoctis]

Hallo,

du musst mit Math.max arbeiten, um die Position des Buttons zu begrenzen. Momentan schiebt sich der Buttons nach unten, was den Textbereich vergrößert, da er sich seinen Kindern anpassen muss. Dabei vergrößert sich die gesamte Seite, was dazu führt, dass der Link nun noch weiter runter kann, um wieder den Textbereich und damit die Seite zu vergrößern. Diesen Teufelskreis kannst du nur dadurch beenden, dass das animierte margin-top nicht größer werden darf als die offsetWidth des Textbereichs abzüglich der offsetWidth dieses Buttons.

Gruß,

Amica

[powermax]

meinst du offsetWidth oder offsetHeight? geht ja um die höhe oder?

Hab mal nach Math.max geschaut, nicht leicht dadrüber etwas herauszufinden. Hab auch nach Offset bei jquery API webseite gesucht aber werd daraus nicht wirklich schlau wie ich das anstellen soll.

bin son bissl schwer von begriff wenns um javascript syntax geht :/

[AmicaNoctis]

JavaScript ist leicht. JQuery macht die Sache unnötig kompliziert, wenn es mal über die vorgegebenen Standardbausteine hinausgehen soll. Von der teilweise merkwürdigen Schreibweise ganz zu schweigen.

(Ist aber nur meine persönliche Meinung, nicht dass jetzt alle gegen mich flamen, wie ich ihr geliebtes JQuery runtermachen kann.)

Math.max

[powermax]

mhm, ist natürlich für mich ejtzt die Frage wie ich das nun kombiniere.

Hab nur wenig Erfahrung daher weis ihc nicht wie ich das syntaxmäßig aufschreiben soll...

[AmicaNoctis]

.animate({"marginTop": Math.max(maximum, $(window).scrollTop() + 60) + "px"}, "slow" );

Alles, was du jetzt noch tun musst, ist, die Variable maximum vor diesem Aufruf zu definieren. Es wird auf irgendeine offsetHeight hinauslaufen, von welchem Element kann ich anhand deines Codes nicht sagen.

[powermax]

hab mal geschaut und das auf mehrere arten gemacht. Mit height und einem alert zum test funktionierts, da bekomm ich eine Zahl raus,
beim offsetHeight kommt undefined raus..

	$().ready(function() {
		var $scrollingDiv = $("#totop");
 		/* var maximum = ($(".subcontent").height()); */
 		/* alert($(".subcontent").offsetHeight()); */
 		var maximum = ($(".subcontent").offsetHeight());
 		
 		alert($(".subcontent").offsetHeight());
 		
 		
		$(window).scroll(function(){			
			$scrollingDiv
				.stop()
				.animate({"marginTop": Math.max(maximum, $(window).scrollTop() - 30) + "px"}, "slow" );		
		});
		
		
	});

wie gesagt bin kein Ass in der Syntax^^

[AmicaNoctis]

offsetHeight ist eine Eigenschaft, keine Funktion. Wenn JQuery den Zugriff darauf nicht aus irgendeinem blöden Grund verhindert, ruft man diese Eigenschaft so ab:

var hgt = irgendeinElement.offsetHeight;

Falls das nicht geht, sieh bitte im JQuery-Handbuch nach, wie man welche Art von Höhe abruft.

[powermax]

öhm hab mal ein bisschen rumgespielt und auch nach offsetheight gesucht. Sollte in der theorie so funktionieren wie du es gesagt hast. Allerdings tut es das nicht.

Es kommt bei einer entsprechenden Alert Ausgabe weiterhin "undefined" raus.

Dann funktioniert der code mit dem math.max(maximum..) leider nicht selbst wenn das maximum eine kleine zahl ist (z.B. 150).

Würde dann glaub cih auch nicht funktionieren wenn die varibale Maximum einen wert von offsetHeight bekommen würde, da es ja ohne variablen schon nicht funktioniert.

Bin total verwirrt. Iwie muss man das doch hinbekommen? :/

--

update: hab mal zwei Werte für Maximum genommen. 1x 50px und ein weiteres mal 100px. Dabei ist mir etwas aufgefallen:



Das Scrollende Div kann jeweils (siehe BIld) 50px und 100px an das nächst obere Element dran. Das prinzip funktioniert allerdings nicht wie es sollte.

Es kann weiter weg als 50px bzw. 100px aber nicht näher ran! als würde das maximum ein minimum sein...


----
Update #2:

mein eigener Satz "als würde das Maximum ein minimum sein" hat mich auf eine idee gebracht. Wenn sich der snippet so verhält das maximum ein minimum wird (math.max) dann könnte doch math.min das gegenteil bewirken!

>>> Siehe da es klappt. Bei einer reellen Zahl (300 z.B.) klappt es. Es kann nicht weiter runter als bis 300px

jetzt fehlt nur noch die Dynamische begrenzung

[AmicaNoctis]

Du hast völlig recht: Um einen Wert auf ein Maximum zu begrenzen, muss man natürlich Math.min nehmen.

Was jetzt offsetHeight angeht: Beachtest du auch, dass in JS Groß- und Kleinschreibung strikt unterschieden wird? Deinen Postings nach bist du da nicht 100%ig korrekt. Wenn das im Code auch so ist, wird es wohl daran liegen.

[powermax]

muss das offsetHeight so oder offsetheight oder sogar offset.height geschrieben werden.

Es müsste ja daran liegen an der schreibweise.. es gibt ja keinen direkten ... fehler (Firefox fehlerkonsole)

aber ich habs in meinem code immer so:

"offsetHeight"


--
update #1

habe im internet beim suchen auch die schreibweise gesehen:

('html')[0].offsetHeight


was bedeutet denn die [0] ?

[AmicaNoctis]

Nimm's mir nicht übel, aber deine Fragen erwecken bei mir den Eindruck, dass du dich bisher kein Stück mit JQuery auseinandergesetzt hast. Frage dich, wieviel Zeit du darin investiert hast, dich mit den im Handbuch beschriebenen Grundlagen auseinander zu setzen und wie sich diese Zeit im Verhältnis zu deinen Trial-and-Error-Ansätzen schlägt.

Daher informierst du dich jetzt bitte selbst, was die 0 dort soll. Ich verrate schonmal soviel, dass es sich um einen Array*-Index handelt.

___
* Es ist zwar eher ein NodeSet, aber das ist so gestaltet, dass der Zugriff auf die Elemente genau wie bei einem Array funktioniert und es analog zum Array auch eine length-Property besitzt.

[powermax]

okay glaube es funktioniert jetzt. Hab offset garnicht gebraucht.

Es hat gereicht wenn ich einfach die höhe meines content divs auslese und das rechte menu (höhe) abziehe = optimale höhe für das .totop div =)

Trotzdem vielen vielen dank für den tipp mit math.max bzw. min


Hier kann man echt noch was lernen! Will ja nicht das mir das jemand komplett aufschreibt und ich nur copy+paste machen muss sondern das du mir tipps und anregungen gegeben hast die mich dann so almählig auf die richtige Pfährte gelockt haben! Das prinzip find ich super!

Dankeschön =)


hier noch der funktionierende code zur vollständigkeit halber:

	$().ready(function() {
		var $scrollingDiv = $("#totop");

 		
 		/* alle Elemente mit der CSS-Klasse ".text" durchlaufen */  
		$('.text').each(function(e) {  
  
  		/* Höhe in maximum schreiben */
  		maximum = $(this).height();
  		newmax = (maximum - 430);
  		
  });
 		
		$(window).scroll(function(){			
			$scrollingDiv
				.stop()
				.animate({"marginTop": Math.min(newmax, $(window).scrollTop() - 0) + "px"}, "slow" );	
		});
		
		
	});