★모바일에서 팝업 띄울때 부모 창 스크롤 막고 팝업만 스크롤 되게 하기!
→ 모바일에서는 overflow-y:hidden;이 안먹어서 이 방법 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>모바일 스크롤 막기</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.cont {
font-size: 30px;
font-weight: bold;
line-height: 330px;
text-align: center;
}
.cont1 { background-color: #F29B76; }
.cont2 { background-color: #EA68A2; }
.cont3 { background-color: #32B16C; }
.cont4 { background-color: #556FB5; }
.nav {
overflow: hidden;
overflow-y: scroll;
position: fixed;
top: 0;
left: 0;
z-index: 200;
width: 200px;
height: 100%;
border: 2px solid #000;
background: #fff;
}
.nav .menu {
display: block;
height: 70px;
margin-top: 20px;
background-color: #EA68A2;
}
button {
position:fixed;
top:0;
right:0;
z-index:100;
width:100px;
height:50px;
}
.bnt_open { right:110px; }
/* 바디에 스크롤 막는 방법 */
.not_scroll{
position: fixed;
overflow: hidden;
width: 100%;
height: 100%
}
.not_scroll .cont {
position: relative;
top: 0;
}
</style>
</head>
<body>
<button type="button" class="bnt_open">메뉴보기</button>
<button type="button" class="bnt_close">메뉴닫기</button>
<div style="display:none" class="nav">
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
</div>
<div class="cont cont1">content1</div>
<div class="cont cont2">content2</div>
<div class="cont cont3">content3</div>
<div class="cont cont4">content4</div>
</script>
<script>
var posY;
$(".bnt_open").on("click", function(e){
posY = $(window).scrollTop();
$("html, body").addClass("not_scroll");
$(".nav").css("display","block");
$(".cont").css("top",-posY);
});
$(".bnt_close").on("click", function(){
$("html, body").removeClass("not_scroll");
$(".nav").css("display","none");
posY = $(window).scrollTop(posY);
});
</script>
</body>
'코딩 > jquery' 카테고리의 다른 글
| 모바일,pc 접속 기기 구분하기 (0) | 2019.02.21 |
|---|---|
| 스크롤을 감지하여 사이트의 헤더를 보이거나 숨기기 (0) | 2019.02.08 |
| window.onload를 대체하는 jquery의 ready 함수 (0) | 2019.01.11 |
| 노드찾기 (0) | 2018.11.09 |
| 스크롤 이벤트 (0) | 2018.11.02 |