스크롤메뉴..
본문
안녕하세요!
좌측 탭을 누르면 우측 내용이 스크롤되거나, 반대로 우측에 마우스 스크롤링했을떄 좌측탭이 활성화 되게 작업하고있습니다.
1. 일단 스크롤링은 누르는것에 맞게 잘 되는데 해당 탭이아닌 다른탭에 .active되는 부분을 수정하고싶습니다.
2. 우측에서 마우스 스크롤링했을때도 .page가 .modal-con 의 윗부분에 닿았을때 좌측탭 .active가 활성화되고싶은데 html의 윗부분에서 활성화돼요 .,,
이부분 수정해주시며 감사하겠습니다ㅠㅠ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>스크롤</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<link href="http://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
</head>
<style>
.modal .modal-content.modal-content__form { min-width: 900px; max-width: 900px; }
.modal .modal-content.modal-content__form .box {height: 720px; padding: 0;}
.modal-content {
z-index: 10;
width: 50%;
position: absolute;
top: 50%;
transform: translateY( -50%); }
.modal-con {
overflow: auto;
height: 612px;
scroll-behavior: smooth;
}
.modal-con .modal-con__menu {
position: absolute;
width: 18%;
height: calc( 100% - 108px );
left: 0;
padding-top: 12px;
border-right: solid 1px #E4E5ED;
background: #fff;
overflow-y: auto;
}
.modal-con .modal-con__menu li {
cursor: pointer;
font-size: 14px;
font-weight: 500;
display: block;
color: #9A9BA7;
transition: all ease 0.2s;
}
.modal-con .modal-con__menu li a { display: block; padding: 14px 21px;}
.modal-con .modal-con__menu li a.active {
background-color:black;
color:white;
}
.modal-con .form-step {
display: none;
width: 82%;
height: 100%;
right: 0;
float: right;
padding: 0 21px 0;
}
.modal .modal-content.modal-content__form .bottom-btn {
text-align: right;
background: #Fff;
position: absolute;
bottom: 0;
left: 0;
border-top: solid 1px #E4E5ED;
padding: 12px 24px 15px;
z-index: 1;
border-radius: 0 0 18px 18px;
float: right;
}
.page {
border:10px solid red;
box-sizing:border-box;
}
html[data-current-page-index="0"] .page-indicator {
transform:translateY(0);
}
</style>
<body>
<div class="is-desktop">
<!------------------ 모달창--------------------------->
<div id="" class="modal" style="display: flex">
<div class="modal-background"></div>
<div class="modal-content modal-content__form" style=" overflow: unset; ">
<div class="box">
<div class="afms-header__con is-flex is-justify-content-space-between is-align-items-center" style="background: #fff;">
<div class="is-flex is-size-7 has-text-weight-medium">
<span style="color: #9A9BA7;">상단제목</span>
</div>
<span class="header-icon">
<a href="javascript:void(0);" class="close_btn modal_close has-text-black">×</a>
</span>
</div>
<article>
<div class="is-flex is-align-items-end is-justify-content-space-between py-2 px-3" style="border-bottom: solid 1px #E4E5ED; ">
<div class="cont-select2 cont-select__quantity mt-0" style="width: 80%; ">
</div>
<div class="is-flex">
<button class="apt-btn apt-btn__sky is-size-6" >버튼</button>
</div>
</div>
<div class="modal-con" style="height: 600px;">
<div class="modal-con__menu pt-0 page-indicator">
<article class="is-relative" style=" border-bottom: solid 1px #F2F3F7;">
<div class="media-content py-4 px-3 detail_view detail_view__quantity" style="background: #f3f3f3; cursor: pointer;">
<div class="is-flex is-align-items-center is-justify-content-space-between">
<div class="con_title is-flex is-align-items-self-end" style="color: #132997;">
<span class="is-size-6 ">111</span>
</div>
</div>
</div>
<ul class="media-content media-content__quantity" style="overflow-x: unset;">
<li class="btnQuantityScroll"><a href="#page-1">페이지 1</a></li>
<li class="btnQuantityScroll"><a href="#page-2">페이지 1</a></li>
<li class="btnQuantityScroll"><a href="#page-3">페이지 1</a></li>
<li class="btnQuantityScroll"><a href="#page-4">페이지 1</a></li>
<li class="btnQuantityScroll"><a href="#page-5">페이지 1</a></li>
</ul>
</article>
</div>
<div class="form-step pages" style="padding-bottom: 80px; display: inherit;">
<div class="field mb-0 page page-1" id="page-1">
<article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;">
<div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;">
<div class="is-flex is-align-items-center is-justify-content-space-between">
<div class="con_title is-flex is-align-items-self-end">
<span class="is-size-6 ">1.ㄱㄴㄷ</span>
</div>
<a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn">
<img src="assets/images/selecticon_arrowup.svg" alt="">
</a>
</div>
</div>
<div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset; ">
<div style="background: grey; height: 300px;"></div>
</div>
</article>
</div>
<div class="field mb-0 page page-2" id="page-2">
<article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;">
<div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;">
<div class="is-flex is-align-items-center is-justify-content-space-between">
<div class="con_title is-flex is-align-items-self-end">
<span class="is-size-6 ">2.ㄹㅁㅂ</span>
</div>
<a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn">
<img src="assets/images/selecticon_arrowup.svg" alt="">
</a>
</div>
</div>
<div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset; ">
<div style="background: grey; height: 300px;"></div>
</div>
</article>
</div>
<div class="field mb-0 page page-3" id="page-3">
<article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;">
<div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;">
<div class="is-flex is-align-items-center is-justify-content-space-between">
<div class="con_title is-flex is-align-items-self-end">
<span class="is-size-6 ">3.ㅅㅇㅈ</span>
</div>
<a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn">
<img src="assets/images/selecticon_arrowup.svg" alt="">
</a>
</div>
</div>
<div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset; ">
<div style="background: grey; height: 300px;"></div>
</div>
</article>
</div>
<div class="field mb-0 page page-4" id="page-4">
<article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;">
<div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;">
<div class="is-flex is-align-items-center is-justify-content-space-between">
<div class="con_title is-flex is-align-items-self-end">
<span class="is-size-6 ">4.ㅊㅋㅊ</span>
</div>
<a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn">
<img src="assets/images/selecticon_arrowup.svg" alt="">
</a>
</div>
</div>
<div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset; ">
<div style="background: grey; height: 300px;"></div>
</div>
</article>
</div>
<div class="field mb-0 page page-5" id="page-5">
<article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;">
<div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;">
<div class="is-flex is-align-items-center is-justify-content-space-between">
<div class="con_title is-flex is-align-items-self-end">
<span class="is-size-6 ">5.ㅍㅎ</span>
</div>
<a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn">
<img src="assets/images/selecticon_arrowup.svg" alt="">
</a>
</div>
</div>
<div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset;">
<div style="background: grey; height: 300px;"></div>
</div>
</article>
</div>
</div>
</div>
<div class="bottom-btn p-3">
<button class="apt-btn apt-btn__grey2 is-size-6 is-justify-content-center" id="quantityCancel" style="width: 115px;">취소</button>
<button class="apt-btn apt-btn__navy on is-size-6 is-justify-content-center" id="quantityEdit" style="width: 115px;">수정</button>
<button class="apt-btn apt-btn__navy on is-size-6 is-justify-content-center" id="quantitySave" style="width: 115px;">저장</button>
</div>
</article>
</div>
</div>
</div>
<!------------------ 모달창--------------------------->
</div>
</body>
<script>
//서랍메뉴 접기펼치기
$(".card_detail__btn").css("transform","rotate(0deg)");
$(".detail_view").click(function(){
var submenu = $(this).parents().children(".media-content__detail");
if( submenu.is(":visible") ){
$(this).parent().find(".card_detail__btn").css("transform","rotate(180deg)");
submenu.slideUp();
}else{
$(this).parent().find(".card_detail__btn").css("transform","rotate(0deg)");
submenu.slideDown();
}
});
//좌측 서랍메뉴 접기 펼치기
$(".detail_view.detail_view__quantity").click(function(){
var submenu = $(this).parents().children(".media-content__quantity");
if( submenu.is(":visible") ){
$(this).parent().find(".card_detail__btn").css("transform","rotate(180deg)");
$(this).css("background","#fff");
submenu.slideUp();
}else{
$(this).parent().find(".card_detail__btn").css("transform","rotate(0deg)");
$(this).css("background","#F3F3F3");
//$(this).css("transform","rotate(180deg)");
submenu.slideDown();
}
});
$('.page-indicator > ul > li > a').click(function(e) {
var href = $(this).attr('href');
var targetTop = $(href).offset().top;
// alert("11");
/*
// 한번에 가도록 하는 방법
$(window).scrollTop(targetTop);
*/
$('html').stop().animate({scrollTop:targetTop}, 300);
e.preventDefault();
});
function Page__updateIndicatorActive() {
var scrollTop = $('.modal-con').scrollTop();
// 역순으로 검색해야 편하다
$($('.page').get().reverse()).each(function(index, node) {
var $node = $(this);
var offsetTop = parseInt($node.attr('data-offset-top'));
console.log("scrollTop = "+scrollTop);
console.log("offsetTop = "+offsetTop);
console.log("========================================");
if ( scrollTop >= offsetTop ) {
// 기존 녀석에게 활성화 풀고
$('.modal-con .modal-con__menu li a.active').removeClass('active');
// 해당하는 녀석에게 활성화 넣고
var currentPageIndex = $node.index();
$('.modal-con .modal-con__menu li a').eq(currentPageIndex).addClass('active');
$('html').attr('data-current-page-index', currentPageIndex);
return false; // 더 이상 다른 페이지를 검사하지 않는다.
}
});
}
// 각 페이지의 offsetTop 속성을 업데이트
function Page__updateOffsetTop() {
$('.page').each(function(index, node) {
var $page = $(node);
var offsetTop = $page.offset().top;
$page.attr('data-offset-top', offsetTop);
});
// 계산이 바뀌었으니까, 다시 상태 업데이트
Page__updateIndicatorActive();
}
function Page__init() {
Page__updateOffsetTop();
}
// 초기화
Page__init();
// 화면이 리사이즈 할 때 마다, offsetTop을 다시계산
$(window).resize(Page__updateOffsetTop);
// 스크롤이 될 때 마다, 인디케이터의 상태를 갱신
/*
$(window).scroll(Page__updateIndicatorActive);
*/
$('.modal-con').scroll(function() {
// 스크롤 이동 시 실행되는 코드
Page__updateIndicatorActive();
})
</script>
</html>
답변 2
다음과 같은 방법으로 해볼 수 있을 것 같습니다.
// 좌측 탭 클릭 시 .active 클래스 관리
$('.modal-con__menu li a').click(function () {
$('.modal-con__menu li a.active').removeClass('active'); // 모든 탭에서 .active 클래스 제거
$(this).addClass('active'); // 클릭한 탭에 .active 클래스 추가
});
// 스크롤 이벤트 처리
$('.modal-con').scroll(function() {
// 스크롤 위치
var scrollTop = $('.modal-con').scrollTop();
// 각 페이지의 offsetTop 속성을 업데이트
$('.page').each(function(index, node) {
var $page = $(node);
var offsetTop = $page.offset().top;
$page.attr('data-offset-top', offsetTop);
});
// 업데이트된 offsetTop 속성을 기반으로 활성 탭 설정
$('.page').each(function(index, node) {
var $node = $(this);
var offsetTop = parseInt($node.attr('data-offset-top'));
if (scrollTop >= offsetTop) {
// 현재 활성 탭 제거
$('.modal-con__menu li a.active').removeClass('active');
// 현재 탭을 활성화
$('.modal-con__menu li a').eq(index).addClass('active');
$('html').attr('data-current-page-index', index);
}
});
});
$('.modal-con').scroll(function() {
// 스크롤 이동 시 실행되는 코드
Page__updateIndicatorActive();
});
마직막 ; 요것 수정하세요
이미지헨들링리소스 인듯합니다.
그렇다면,
좌측메뉴를 클릭하면 우측은 정상적으로 헨들링이 된듯 합니다.
그렇다면 ....
우측 해당 된곳을 즉 4번을 위치에 가면 좌측 메뉴가 같이 헨들링되어서 좌측도 4번 위치를 헨들링 하고자 하는것 같은데 맞는가요?
맞다면 아래 함수 부분에서 수정을 보시면 될것 같습니다.
그리고 function Page__updateIndicatorActive() 요것 스크롤 위치를 가지고는 함수 이분에서 처리 해주면 될것 같습니다.
답변을 작성하시기 전에 로그인 해주세요.