scroll 제어(현재 위치, 위치 이동 등)

ex) 스크롤이 특정위치 도달하면 내용필드 숨기거나 보여주기

// 특정 id값의 offset를 구한다.
var titleOffset = $("#title").offset();
		
$(window).scroll(function() {
	if( $(window).scrollTop() < titleOffset.top ) {
		$("#content").css("display","block");
	} else {
		$("#content").css("display","none");
	}
});

 

ex) 버튼 등으로 해당함수 호출시, 원하는 곳으로 스크롤 이동

function goScroll() {
	var offset = $("#title").offset();
	console.log("현재위치, 특정위치=> "+$(window).scrollTop() + " || " +offset.top );
	$('html, body').animate({scrollTop : offset.top}, 400);
}

 

ex) 플로팅 푸터에서 멈추기

// 스크롤이 class="title" 높이보다 크고, 푸터영역보다 작을때만 플로팅 보이게
$(window).scroll(function() {
	// footer 영역에서는 플로팅 안보이도록 설정 
	let footerHeight = $("#footer").outerHeight(); 
	let footerTop = $(document).height() - $(window).height() - footerHeight;
			
	if( $(window).scrollTop() > $("section.title").offset().top && $(window).scrollTop() < footerTop) {
		$(".floating").css("display","block");
	} else {
		$(".floating").css("display","none");
	}
});

// $(document).height(): 실제 도큐먼트 높이
// $(window).height(): 현재 활성화 되어있는 웹 페이지 높이
// $("#footer").outerHeight(): id="fotter" 값의 높이