SCRIPT 스크롤 특정 위치 고정 - 내리거나 올리면 나타나는 스크립트
페이지 정보
조회 1,002회 작성일 22-05-09 12:50
본문
스크롤 특정 위치 고정
내리거나 올리면 나타나는 스크립트
특정 위치로 이동하면 이벤트가 발생하는 스크립트를 설명하려고 한다. 흔히 jQuery로 스크롤하면 특정 위치에 나타나는 메뉴를 이해해 보자.
스크롤 특정 위치 고정 - 내리거나 올리면 나타나는 스크립트
스크롤 내리면 나타나는 메뉴 요소
아래 예제 소스를 이용하면, 홈페이지를 위로 올리면 특정 위치가 되었을 때 요소가 나타나게 된다.
HTML부분이다. 단순하게 대상만 만들어 주는 것이므로 간단하다.
[code]
<div class="기준 위치에 사용될 요소 이름"></div>
<div class="스크롤되면 나타나는 요소 이름"></div>
[/code]
위에서 이름을 정하면, 아래에 있는 CSS style과 script 코드에서도 같은 이름을 사용해야 한다.
이번엔 스타일 CSS에 넣을 코드다.
[code]
<style type="text/css">
.기준 위치에 사용될 요소 이름 {top:0px; width:100%; height:100px;}
.스크롤되면 나타나는 요소 이름 {width:100%; height:50px; position:absolute; left:0; top:-300px; text-align:center; line-height:50px; }
</style>
[/code]
위의 HTML에서 사용된 이름을 그대로 복사해서 바꾸면 된다.
이를 적용하면 "기준 위치에 사용될 요소 이름"는 보이지 않는다. 그저 위치만 잡아주는 요소이기 때문이다.
그리고 가장 중요한 스크립트 코드다.
[code]
<script>
$(document).ready(function(){
var navHeight = $(".기준 위치에 사용될 요소 이름").height();
$(".스크롤되면 나타나는 요소 이름").hide();
$(window).scroll(function(){
var rollIt = $(this).scrollTop() >= navHeight;
if(rollIt){
$(".스크롤되면 나타나는 요소 이름").show().css({"position":"fixed", "top" : "60px"});
}
else{
$(".스크롤되면 나타나는 요소 이름").hide();
}
});
});
</script>
[/code]
위의 css에서 처음엔 top:-300px;로 해서 화면 밖에 있게 하다가, 이 스크립트에서 "position":"fixed", "top" : "60px"로 변경해 주는 것이 포인트인 것이다.
jQuery 특정 위치 이벤트 예제 소스
이번엔 위 HTML의 div와 CSS의 style에 동작을 만들어 주는 스크립트 예제 소스를 볼 차례다.
코드의 원본 링크 : https://coding-designer.tistory.com/4
이해를 돕기 위해, 위에서는 원본을 수정해서 설명했었다.
(아래 코드를 그대로 사용하면, 처음 로딩 때 숨어있어야 할 요소가 잠간 나타나며 깜빡이기 때문이다)
아래 원본은 HTML이나 PHP 또는 JS파일에서, 스크롤 특정 위치에서 메뉴가 나타나게 되는 코드를 담고 있다.
[code]
<script>
$(document).ready(function(){
var navHeight = $(".기준 위치에 사용될 요소 이름").height();
//"기준 위치에 사용될 요소 이름"의 높이를 구하기
$(".스크롤되면 나타나는 요소 이름").hide();
//스크롤시 나타날 객체 미리 숨기기
$(window).scroll(function(){ // 윈도우 스크롤 기능 작동
var rollIt = $(this).scrollTop() >= navHeight;
// 스크롤의 정도가 navHeight 의 값을 넘었을 때 == 윈도우 스크롤의 값이 navHeight 의 높이와 같거나 크다
/*
scrollTop 은 윈도우에서 스크롤의 위치가 가장 상위에 있다는 의미로 해석
스크롤의 위치가 화면 아래일수록 == scrollTop 의 값이 커짐
*/
if(rollIt){
//윈도우 스크롤 기능의 값이 navHeight의 높이와 같거나 크면
$(".스크롤되면 나타나는 요소 이름").show().css({"position":"fixed"});
}
else{
$(".스크롤되면 나타나는 요소 이름").hide();
}
});
});
</script>
[/code]
여기서 중요한 것은, 위의 세 코드 소스에 나타나는 객체 요소의 이름들이 모두 같도록 확인하는 것이다.
여기에서 $(객체).height();는 높이를 알기 위한 것이다.
$(window).scroll(function(){});는 스크롤 때 이벤트를 발생시키는 것이며,
$(this).scrollTop();는 스크롤된 맨 위의 위치에 대한 것이다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
스크롤을 내리면 나타나는 스크립트나 올리면 나타나는 스크립트는 대부분 포지션을 absolute나 fixed를 사용한다는 것도 알아두자.
그러므로 위 소스에서 이것을 변경하면 원하는 자리에 위치하지 않을 수 있으니 주의한다.