2017.04.04　【更新日 : 2023.11.02】

【jQuery】要素を指定したエリア内で追従スクロールさせる関数

Category：: jQuery
Tags：: jQuery, スクロール, 追従

transform プロパティにて追従させているので、
ブラウザはIE9まで対応しています。

jQuery(document).ready(function($){
	//要素を指定したエリア内で追従させる
	$(window).on('scroll load resize orientationchange',function(){
		mainScroll('追従させたいエリア','追従させる要素');
	});
	function mainScroll(itemAreaTarget,scrollElmTarget) {
		var scrollTop = $(window).scrollTop();
		var itemArea = $(itemAreaTarget);
		var scrollElm = $(scrollElmTarget);
		
		var itemAreaPosi = itemArea.offset().top;
		var itemAreaHeight = itemArea.height();
		var itemHeight = scrollElm.height();
		if(scrollTop > itemAreaPosi && scrollTop < Number(itemAreaPosi) + Number(itemAreaHeight) - Number(itemHeight)){
			var scrollNum = Number(scrollTop)-Number(itemAreaPosi);
			scrollElm.css({
				'-webkit-transform': 'translateY('+scrollNum+'px)',
				'-moz-transform': 'translateY('+scrollNum+'px)',
				'-ms-transform': 'translateY('+scrollNum+'px)',
				'-o-transform': 'translateY('+scrollNum+'px)',
				'transform': 'translateY('+scrollNum+'px)'
			});
		} else if (scrollTop <= itemAreaPosi) {
			scrollElm.removeAttr('style');
		}
	}
});