Tweet

Pocket

ページスクロールの途中で指定要素の位置に来たらfixedが解除されるJQueryです。

JQuery

$(document).ready(function(){
	var fixedElm = $('.fixedBox'); // fixedする要素
	var cancellationElm = $('.sectionBox'); // これの位置に来たらfixedが解除される要素

	var fixedHeight = fixedElm.height(); // fixedする要素の高さを取得
	var cancellationVal = cancellationElm.offset().top - $(window).height() + fixedHeight; // fixed解除するための基準となる値を取得
	$(window).on('scroll',function(){
		if ($(window).scrollTop() < cancellationVal) {
			fixedElm.css('position', 'fixed');
		} else {
			fixedElm.css('position', 'relative');
		}
	});
});