Ausgangsposition eines Elementes beim scrollen setzen

[Kossy]

Hallo zusammen !

Ich möchte einen Warenkorb auf meiner Internetseite scollen lassen (dieser befindet sich in dem Bild "Ausgangsposition" ganz rechts).

Das funktioniert auch ganz gut, allerdings bewegt er sich bei Scrollen immer ein Stückchen über mein anderes HTML Element "Suche" (siehe Dateien "scrolling" und "scrolling_2" im Anhang des Posts).

Ich möchte im Prinzip erreichen, dass er sich zwar beim scrollen bewegt, soll dabei allerdings unterhalb des Elementes "Suche" bleiben, also dort quasi "andocken.

Zur Realisierung des Scrollings habe ich das folgende JQuery verwendet:

jQuery(document).ready(function($) {	
	$(window).scroll(function() {		
		//console.log($(window).scrollTop());		
		if ($(window).scrollTop() > 141) {
			elementId = $('.panel').addClass('sticky');	
		} else {
			elementId = $('.panel').removeClass('sticky');
		}
	});
});

Dieser CSS Selector sorgt dann für die Positionierung des Warenkorbes bei der Bewegung bzw. dem Scrollen:

.panel.sticky { 
     position: fixed; 
     top: 35px;
}

Ich habe einfach mal aus dem Bauch heraus das Top ein wenig höher gesetzt und diesen CSS Selector zum Testen verwendet, der beim Scrollen eingesetzt werden könnte. Damit sieht das schon etwas besser aus, aber der Wert könnte ja bei einer anderen Bildschirmauflösung dann wieder nicht passen:

test .panel.sticky {
     position: fixed;     
     top: 150px;
}

Hat das jemand eine Idee, wie man das wirklich auf einem sauberen Weg lösen könnte? Ich vermute mal, dass man man igrendwie den Höhewert des darüber liegenden HTML Elementes "Suche" verwenden muss.

MFG
Kossy

 

[kkapsner]

Ich würde ja das nicht an dem "Suche"-Element orientieren, sondern den Warenkorb erst dann fixieren, wenn er im Browserfenster auf der Höhe ist, auf der er dann auch fixiert werden soll. Das unterbindet dann ein Springen.

Die Position eines Elementes kannst du in jQuery mit .offset() oder .position() auslesen - da gab' es irgendeinen Unterschied, aber ich kenn' mich mit jQuery nicht wirklich gut aus, da ich es nicht mag.