[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] 스크롤할때 메뉴바 상단에 고정하기

[javascript] select potion 제어 변수들

[html5] datalist 사용법

[jQuery] 익스플로러 외 날짜 입력박스 사용하기(input type dat...

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

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

Chrome 크롬 강력 새로고침 단축키

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

textarea 엔터키 입력할때마다 입력박스 높이를 증가시키는 자바...

CSS 반응형 레이아웃 만들기

javascript 에서 window.onload() 와 window::onload() 비교

3DP Chip은 드라이버를 쉽게 찾아주고 3DP Net은는 랜카드통합 �...

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

HTML과 XHTML의 차이점

Apache rewrite Module

alt 나 title의 줄바꿈은 & # 1 3 ;

정규 표현식