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

[html5] datalist 사용법

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

[Javascript] confirm 클릭 확인받기

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

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

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

javascript encodeURI -> php EUC-KR decode

말풍선 위치 계산 (마우스 포인터 위치계산)

[JavaScript] try catch문 사용방법