풍선도움말...

호가계부를 시작페이지로

은행 카드 증권 보험 부동산

     
My 즐겨찾기 수정
[무료]  오늘의 운세  /  바이오리듬
여기는 회원님이 직접 등록하신
즐겨찾는 사이트가 출력됩니다.
컴퓨터와 관련있는 모든 팁을 공유합시다.

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

호가계부|2019-09-11 15:41:23|조회 : 595

우선 스타일에 고정할 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>

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


<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 


호가계부 2019-09-11 15:44:10


그리고 중요한 부분은 자바스크립트가 메뉴바 다음에 위치해야 한다는 점이다.

이걸 몰라서 처음에 많이 해맸음...
번호 제             목 첨부 작 성 일 작성자 조회
112  

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

(1)
2019-11-07 호가계부 51
111  

[Javascript] confirm 클릭 확인받기

  2019-10-09 호가계부 162
110  

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

  2019-09-30 호가계부 336
109  

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

  2019-09-27 호가계부 288
108  

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

2019-09-23 호가계부 519
107  

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

(1)
  2019-09-11 호가계부 596
106  

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

  2019-09-09 호가계부 1161
105  

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

  2019-08-22 호가계부 457
104  

[Android] Chrome Custom Tabs 시작하기

(2)
  2019-08-17 호가계부 790
103  

[Android] 상태바 없애기

2019-08-13 호가계부 612
102  

[Android] 타이틀바 없애기

2019-08-13 호가계부 631
101  

[Android] ERR_CLEARTEXT_NOT_PERMITTED 웹뷰 호출 에러

  2019-08-11 호가계부 916
100  

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

  2019-07-15 호가계부 1361
99  

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

  2019-07-07 호가계부 1529
98  

Html CSS 수직으로 중앙 정렬 하는 방법

  2019-07-05 호가계부 1263
97  

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

(1)
  2019-06-19 호가계부 1705
96  

javascript encodeURI -> php EUC-KR decode

(1)
  2019-06-18 호가계부 1463
95  

윈도우 창 단축키

  2019-06-07 호가계부 1303
94  

컴퓨터 종료시간 예약하기

2019-03-22 호가계부 2505
93  

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

  2019-01-14 호가계부 3600
처음으로 앞으로 | [1] 2 3 4 5 6 | 다음 마지막