[FRAGE] Buttonleiste soll sichtbar bleiben

[mikdoe]

Guten Morgen!

Frage: wenn ich auf einer Seite bei Position .top = 600 px eine vertikale Buttonleiste habe und dann runter scrolle, wie schafft man es, dass dann die Buttonleiste bis max. Viewport-Position 0 px - also an den oberen Rand - mit runter scrollt, damit sie immer sichtbar bleibt? Beim hoch scrollen nachtürlich das gleiche andersrum, da soll die Leiste wieder hoch wandern aber nur bis max. .top = 600 px damit sie in ihrem Rahmen bleibt.

Hab mit verschiedenen Werten ($( document ).height() jQuery('#buttondiv').offset().top jQuery('#buttondiv').offset().top + (jQuery('#buttondiv').parent().offset().top) + $(window).scrollTop()) rum probiert aber das richtige Berechnen raff ich irgendwie nicht.

Raus kommen soll dann die neue Position, damit ich mit jQuery().animate() die Leiste über .onscroll bewegen kann.

 

[TecEye]

Glaube in etwa so, du musst ja die poition fixed machen, damit sie auch da stehen bleibt wo sie soll

$(window).on('scroll', function() {
   scrollPosition = $(this).scrollTop();
   if (scrollPosition >= 600) {
      $('#buttondiv').css( "position", "fixed" ).css( "top", "0px" );
   }else{
      $('#buttondiv').css( "position", "relative" );
   }
});

musste mal bisschen mit dem CSS rumspielen, aber so ist der Weg zumindest

 

[mikdoe]

Klappt leider nicht ganz so gut, tut nämlich leider garnichts.
Aber ich hab die Leiste jetzt mit fixed fest getackert, das reicht mir erstmal so. Danke dir

Später würde ich es gern so machen, dass es beim Scrollen etwas verzögert nachzieht und seinen Platz wieder einnimmt, damit es auch optisch ansprechend ist.

 

[TecEye]

ist sehr merkwürdig, da ich den code aus einem bestehenden Projekt habe, da funktioniert es ganz gut, das Projekt ist auch schon 3 Jahre alt, also dürfte es da keine Probleme geben, habs grad in ner fiddel getestet, geht wunderbar, zeig mal dein code

 

[mikdoe]

habe genau deinen code genommen. in der zweiten zeile ein var davor wegen strict

 

[TecEye]

Edit fiddle - JSFiddle

- - - Aktualisiert - - -

kannste natürlich auch animaten wenne bock hast

 

[mikdoe]

Klappt super, TecEye!
Jetzt wollte ich das gern animieren aber es bewegt sich garnichts, wenn ich diesen Code nutze:

var offset = jQuery('#buttondiv').offset();
jQuery(window).on('scroll', function(){
	var scrollPosition = jQuery(this).scrollTop();
	if (scrollPosition >= offset.top) {
//			jQuery('#buttondiv').css("position","fixed").css("top","0px");
		jQuery('#buttondiv').animate(
			{
				position:	'fixed',
				top:		'0px'
			},
			'slow'
		);
	}
	else {
//			jQuery('#buttondiv').css("position","relative").css("top","");
		jQuery('#buttondiv').animate(
			{
				position:	'relative',
				top:		''
			},
			'slow'
		);
	}
});

Hab's auch ins Fiddle eingebaut: Edit fiddle - JSFiddle
Was mache ich falsch?

 

[TecEye]

position (fixed) lässt sich nicht animaten :/ wo befindet sich der div denn bei dir? Auf body-Ebene? dann würde auch ein absolute passen den wir immer neu berechnen, das würde dann gehen. oder wir erstellen einen clon und positionieren den absolute am body und berechnen den immer wieder neu