이야기앱 세상
jQuery - 스크롤시 메뉴는 고정되고 내용은 스크롤되도록 처리하기 본문
jQuery - 스크롤시 메뉴는 고정되고 내용은 스크롤되도록 처리하기
스크롤시 로고 영역은 스크롤되지만 메뉴는 상단에 고정한 후 내용은 계속 스크롤 처리하게 할 수 있다. 메뉴의 수직 위치를 측정해서 스크롤바의 위치가 메뉴의 수직 위치보다 크면(스크롤바의 위치가 아래일 경우) 메뉴 영역이 고정되게 처리한다. jQuery의 .offset() 메서드를 이용해서 선택한 태그의 위치를 알아낸다.
[스타일을 표시 부분]
<style>
body {
margin: 0px;
padding: 0px;
}
div.main-menu {
background-color: skyblue;
width: 100%;
padding:20px 0;
}
div.main-menu ul{
list-style: none;
}
div.main-menu ul li{
display: inline;
}
div.main-container{
text-align: center;
padding:10px;
}
.menu-fixed {
position: fixed;
top: 0px;
left:0px;
}
.logo{
border-radius: 50%;
padding:10px;
}
</style>
[스크립트 표시 부분]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//상대적인 좌표 값을 반환, .offset()가 반환 하는 객체는 left와 top 속성을 제공
//top 속성을 이용해서 메뉴의 수직 위치를 구함
var menu_offset = $('.main-menu').offset();
//스크롤 바를 스크롤할 때 매개변수로 전달된 함수를 실행시킴
$(window).scroll(function() {
//문서의 스크롤바 위치와 메뉴의 수직 위치를 비교해서
//문서의 스크롤바 위치가 메뉴의 수직 위치보다 크면(위치로 표현하면 아래)
if ($(document).scrollTop() > menu_offset.top) {
//메뉴에 menu-fixed 클래스를 추가해서 메뉴를 고정시킴
$('.main-menu').addClass('menu-fixed');
}else {
//메뉴에서 menu-fized 클래스를 제거해서 메뉴를 수직으로 이동할 수 있도록 처리함
$('.main-menu').removeClass('menu-fixed');
}
});
});
</script>
[HTML 태그 표시 부분]
<body>
<img src="flower.jpg" width="50" height="50" class="logo">
<div class="main-menu">
<ul>
<li>회사소개</li>
<li>상품정보</li>
<li>오시는 길</li>
</ul>
</div>
<div class="main-container">
<img src="rue.jpg">
</div>
</body>
[스크롤하기 전]
[스크롤한 후]
'IT > jQuery' 카테고리의 다른 글
| jQuery - 페이지 내의 특정 위치로 스크롤을 이동시키기 (5) | 2018.12.26 |
|---|---|
| jQuery - ajax 통신이 성공했을 때 팝업창(새창) 띄우기 오류 (0) | 2018.12.24 |
| jQuery를 이용해서 팝업창에서 부모창에 데이터 전달하기 (0) | 2017.07.03 |
| jQuery를 이용해서 checkbox의 선택한 값 모두 읽어 오기 (0) | 2017.07.03 |
| jQuery - ajax 이용해서 multipart 데이터 전송하기 (0) | 2016.03.24 |