모바일 환경에서 or 타블렛
gnb 메뉴 모달창이 나올때
스크롤바를 없애주고 싶다면
/*********************** 공통스타일 *************************/
/* body에 높이가 없어도 hidden이 걸리면 스크롤바가 사라짐 */
/* body.on {overflow: hidden;} */
/* iOS 사파리는 페이지최상단에서만 hidden이 걸리므로 페이지 위로 올라오게함 */
body.on { overflow: hidden; position: fixed; left:0; top:0; width:100%; }
css common 에 공통스타일로 들어가있기때문에
제이쿼리에서만
on 클래스를 걸어준다.
// 타블렛모바일
$('#header .m_btn_close').hide();
$('#header .btn_menu').on('click', function () {
$('#header, .m_gnb_wrap').addClass('on');
$('#header .m_btn_close').show();
$('#header .search_wrap').slideUp(200);
$('body').addClass('on');
});
$('#header .m_btn_close').on('click', function () {
$(this).hide();
$('#header, .m_gnb_wrap').removeClass('on');
$('#header .btn_menu').show();
$('body').removeClass('on');
});
메뉴 버튼이 클릭되어 모달창이 나올때
$('body').addClass('on'); 으로 스크롤바 없애주고
모달창이 닫기버튼으로 꺼지면
$('body').removeClass('on');
꺼준다
'jQuery > jQuery 기본' 카테고리의 다른 글
제이쿼리 html에서 CDN 호스트 방식으로 연결하기 (0) | 2022.12.29 |
---|---|
제이쿼리 요소 바깥쪽 클릭시 창닫기 length 판단 (0) | 2022.12.16 |
파비콘 돌아가게 만들기 ( 배열 or 변수) (0) | 2022.12.07 |
제이쿼리 gnb 아코디언 전체메뉴 만들기 (0) | 2022.12.02 |
select박스의 값에따라 change 로 값넣어주기 / 버튼 켰다 끄기 (0) | 2022.11.28 |
댓글