[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 제어 변수들

[리눅스] gzip 압축풀기

[php] 날짜 계산 예제

[엑셀] 셀에 날짜 입력 단축키

[html5] 스마트폰 웹브라우저 상단바 없애는 방법

[html5] datalist 사용법

[Android] android studio 설치 및 셋팅

[MySql] 날짜 비교 검색 (오늘, 어제, 한달전...)

phpMyAdmin 설치 및 오류 해결

MS 엣지 강력한 새로고침

cURL 사용법

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

[엑셀] 셀을 클릭하면 설명 메시지를 팝업 시키는 방법

[Javascript] confirm 클릭 확인받기

[HTML][CSS] 페이지 넘김 및 프린터 출력 여백 설정

[javascript] window.open으로 오픈한 자식창에서 부모창 태그 �...

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

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

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

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