스크롤 따라다니는 메뉴 만들기 또는 특정 위치에 스타일 변경하기

스크롤이 특정 위치에 도달했을때 여러 효과를 주는 방법은 많습니다.

그중에서 간단한 소스로 제어하는 방법을 소개 합니다.

 

 

 

HTML 

<div id="ex_box">
	예제 박스 입니다.
</div>

 

css

#ex_box {
 position: relative; top:0; left:0; 
 width: 100%; height: 40px;  text-align: center; background: #3399ff;
}

 

Javascript "onscroll"을 이용한 간단한 제어 방법

 

스크롤이 40px 이상으로 내려가면 브라우져 상단에 붙어 따라다니는 메뉴 만들기

//스크롤 따라다니는 메뉴박스 만들기
onscroll = function() {
  var nVScroll = document.documentElement.scrollTop || document.body.scrollTop;
  if(nVScroll > 40) $("#ex_box")css("position", "fixed"); 
  else $("#ex_box").css("position", "relative");
};

 

스크롤이 200px 이상 내려가면 배경색 바뀌게 하기

 

//스크롤 200px 이상 내려가면 배경색 바뀌게 하기
onscroll = function() {
  var nVScroll = document.documentElement.scrollTop || document.body.scrollTop;
  if(nVScroll > 200) $("#ex_box")css("background", "#3399ff"); 
  else $("#ex_box").css("background", "#ff8000");
};

위 구문을 if(){.....}와 else(){....} 괄호 조건문 안에 여러가지의 유형의 스타일 및 다른 제어를 할 수 있습니다.

 

Jquery "$(window).scroll"을 이용한 간단한 제어 방법

//스크롤 200px이상일때 박스 상단 따라다니기 및 배경색 변경
$(window).scroll(function() {
  
	if($(this).scrollTop() > 200) {
		$("#ex_box").css('position','fixed');
		$("#ex_box").css('background','#3399ff');
	}
	else {
		$("#ex_box").css('position','relative');
		$("#ex_box").css('background','#ff8000');
	}
});

 

 

 

 

 

 

관련된 글 링크

 

• Jquery 작동을 위한 라이브러리 불러오기