Javascript: bezczelny (:D) prawy 'sidebar' wypycha stopkę po scrollowaniu

[Almond]

Witam,

 

Uprzejmie proszę o pomoc

Chciałbym by prawy sidebar z koszykiem był 'sticky' i przesuwał się podczas scrollowania strony.

Użyłem kodu js:

$(function() {
	var offset = $("#sidebar").offset();
	var topPadding = 110;
	$(window).scroll(function() {
		if ($(window).scrollTop() > offset.top) {
			$("#sidebar").stop().animate({
				marginTop: $(window).scrollTop() - offset.top + topPadding
			});
		} else {
			$("#sidebar").stop().animate({
				marginTop: 0
			});
		};
	});
});

Wszystko wygląda pięknie, ale sidebar wypycha stopkę po zjechaniu na sam dół.

Jak zrobić by sidebar zatrzymywał przy stopce?

 

Pozdr

[Almond]

Próbowałem użyć warunku, że funkcja ma być wykonywana tylko gdy:

(wysokość strony) - (wysokość marginesu dla sidebar) > (wysokość stopki ~ 300 px) ale chyba coś nie tak z kodem.

 

Gdyby ktoś miał jakąś całkowicie inna metodę jak przyczepić ten koszyk to chętnie jej użyję

Edited June 13, 2017 by Almond (see edit history)

[endriu107]

Spróbuj tak tylko style sobie poustawiaj pod siebie:

 

$(document).ready(function(){    var sticky;    setTimeout(function(){        sticky = $('#sidebar').offset().top;        $(window).scroll(function(){            if( $(window).scrollTop() > sticky )                $('#sidebar').css({position: 'fixed', top: '0', right: '0', padding: '0', width:'100%'});            else                $('#sidebar').css({position: '', top: '', right: '', padding: '', width:''});        });    }, 100);});

a tak poza tym jak sprawdzam na mniejszym laptopie to przy zjeżdżaniu w dół nie widzę przycisku dodaj do koszyka, zawsze jest poza ekranem.

[Almond]

No właśnie, druga sprawa to to, że musiałbym ustawić jakąś wysokość maksymalną dla tego diva, która wynosiłaby dokładnie wysokość okna. Powyżej tej wartości pokazywałby się suwak.

 

Dzięki @endriu, jednak w zależności od wielkości okna pokazują się różne rozmiary diva, dwa po zjechaniu na sam dół wszystko chowa się pod stopkę.