[JavaScript] 스크롤할때 메뉴바 상단에 고정하기

우선 스타일에 고정할 Class를 만든다.

.sticky {
position: fixed; /* 고정하는 부분 */
top: 0px; /* 고정할 위치 */
z-index: 999; /* 고정하고나서 스크롤하면 다른이미지와 겹치는데 이때 다른이미지 위에 오게하는 부분 */
}

그리고 고정할 메뉴 부분을 html로 만든다. 이때 id를 지정해야 자바스크립트에서 구분할 수 있다.

<div id="submenu_bar">
 <ul>
 <li>메뉴1
 <li>메뉴2
 <li>메뉴3
 <li>메뉴4
 <li>메뉴5
 </ul>
</div>

이제 남은건 스크롤할때 처리할 자바스크립트를 코딩하는 부분이다.

var TopMenu, TopMenuPosition; // 전역변수로 지정한다.
TopMenu = document.getElementById('submenu_bar'); // 고정될 메뉴바를 인식한다.
TopMenuPosition = TopMenu.offsetTop; // 고정될 메뉴바의 처음 위치를 인식한다.
// 스크롤이 되면 실행될 함수
function submenu_bar_fixed(){
 // 스크롤되는 값과 고정될 메뉴바 위치를 비교해서 고정시킬 class 적용 또는 해제 한다.
 if ( window.pageYOffset >= TopMenuPosition ) {
 TopMenu.classList.add("sticky");
 } else {
 TopMenu.classList.remove("sticky");
 }
}
// 스크롤이 되면 실행될 함수 지정
document.addEventListener('scroll',submenu_bar_fixed);

다음은 테스트해볼 샘플입니다.

<style>
.sticky {
position: fixed;
top: 0px;
z-index:999999;
}
#submenu_bar{border-bottom:1px solid blue;border-top:1px solid blue;}
li {display:inline-block; background-color:#c0c0c0; margin-right:20px;}

</style>

 
<div id="submenu_bar">
 <ul>
 <li>메뉴1
 <li>메뉴2
 <li>메뉴3
 <li>메뉴4
 <li>메뉴5
 </ul>
</div>
 

<script>
var TopMenu, TopMenuPosition;
TopMenu = document.getElementById('submenu_bar');
TopMenuPosition = TopMenu.offsetTop;
function submenu_bar_fixed(){
 if ( window.pageYOffset >= TopMenuPosition ) {
 TopMenu.classList.add("sticky");
 } else {
 TopMenu.classList.remove("sticky");
 }
}
document.addEventListener('scroll',submenu_bar_fixed);
</script>

TAG : sticky 메뉴바고정 자바스크립트 javascript

컴퓨터와 관련있는 모든 팁을 공유합시다.

[JavaScript] 스크롤할때 메뉴바 상단에 고정하기

[윈도우] Windows에서 폴더의 내용을 텍스트 파일로 저장하는 방...

cURL 사용법

[Javascript] 숫자를 글자로 바꿔주는 자바스크립트

[JavaScript] 스크롤할때 메뉴바 상단에 고정하기

CSS3 미디어쿼리 @media 규칙 이해.

[엑셀] 특정 자릿수 숫자 반올림

홈페이지(웹브라우저) 창 가로 세로 확인 방법

[Javascript] 날짜 유효성 검사

MySql 기존 컬럼에 자동증가 속성 변경, 추가 및 초기화

CSS로 글자 자르기 및 말줄임 표시 하기

저작권 문제없는 무료 이미지 사이트

IE 문서모드

javascript로 HTML5 에서 재공하는 Placeholder 기능을 구현한다...

Internet Explorer에서 웹 페이지를 인쇄하거나 인쇄 미리 보기�...

메인보드, 하드디스크, 그래픽카드, 파워써플라이의 고장증상

HTML과 XHTML의 차이점

Apache rewrite Module

정규 표현식

mysql error: 145 처리방법

내 홈페이지에 통합 검색창 달기