Вопрос волне интересный..Как фиксированную css кнопку при скролинге остановить над блоком?

Question

[Чёкатилло]

Понятнее будет если увидеть: cg91812-wordpress-3.tw1.ru
Кнопка css вверх-это оранжевый треугольник, а остановить его нужно над полосой в футере. Полоса выполнена просто растянутым блоком

Answer 1

[Никита Каменев]

Надо вычислять координаты и когда они станут равны началу футера, делать ее положение фиксированным.
https://jsfiddle.net/0p37uex8/1/

Answer 2

[Mr Crabbz]

johnpolacek.github.io/scrollorama - Секция "Pin it, then unpin it".

Answer 3

[Павел Чесноков]

Я использую "Bootstrap Affix", как показано здесь.

Comments

[Чёкатилло]

Мне вот нравится Ваш подход, но посмотрев на то, как этот подход осуществляется, я диву дался ) Можете ли привести свой пример подходящий к решению моей задачи?

[Павел Чесноков]

Например так:

jQuery(document).ready(function($) {
	afixed();
});

function afixed() {
	if (!jQuery('.afixed').length) { return; }
	top_position = jQuery('#footer_menu').height() + 500;
	bottom_position = jQuery('#footer_menu').height();
	jQuery('.afixed').affix({
		offset: {
			top: top_position,
			bottom: bottom_position
		}
	});
};

Answer 4

[Павел Коковин]

Не так давно появилось свойство CSS - display: stretch, но поддержка пока плохая) Скоро всё будет проще))