티스토리 뷰

function imScrollTop(selector){

var _position = $(selector).offset();

$( 'html, body' ).animate( { scrollTop: _position.top }, 500 );

};

 

function scroll_motion() { 
	var _wH = window.innerHeight; 
	var _wS = $(window).scrollTop();
	var _wHS = (_wH + _wS);
	$('.section').each(function () { 			
		var _t = $(this).offset().top + (_wH / 2); 
		var _th = $(this).offset().top + $(this).innerHeight(); 
		console.log(_wHS , _t, _th)
		if (_wS > _th) { 
			$(this).removeClass('m_active');      // pass 
		} else if (_wHS > _t) { 
			$(this).addClass('m_active'); 				// over
		} else {																
			$(this).removeClass('m_active');     	// under
		} 	
	}); 
}
$(window).on('scroll resize', scroll_motion);
$(window).trigger('scroll resize');

모션 섹션 : js-secton_motion
모션 클래스 : m_active

'HMLT&CSS&JS > jQuery' 카테고리의 다른 글

[window scroll target positon]  (0) 2022.04.21
[텍스트 글자수 제한]  (0) 2017.10.17
jQuery css 크기 측정  (0) 2013.08.09
# jQuery 회전  (0) 2013.08.07
# chapter06 객체지향 프로그래밍  (0) 2013.02.04
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday