2017.04.04

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

Category: JavaScript / jQuery

Tags, ,

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');
}
}
});

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

Category : JavaScript / jQuery