상품 상세페이지 상세정보 펼쳐보기 버튼 추가 채택완료
굼떠
5개월 전
조회 2,229
상품 상세보기에 이미지가 너무 커서 네이버 스마트스토어 처럼 상세보기펼쳐보기 버튼을 추가하였습니다!
기존의 상품페이지는 우측에 #sit_buy 가 컨텐츠 높이에 도달하였을 경우 fixed가 되고 푸터에 닿을 때 fixed를 해제하게 되어있었는데
상세보기펼쳐보기 버튼을 달고 나니 페이지가 로드되었던 높이를 그대로 가지고 있어 전체 상세보기가 나올 경우에 늘어나는 스크롤을 계산할 수 없어 초기 높이에 #sit_buy fixed가 해제되어 버리는데 상세보기 펼쳐보기 버튼 클릭 시에 컨텐츠의 높이를 다시 계산 하도록 하는 방법이 있을까요?
</p>
<p><script></p>
<p> $(document).ready(function(){</p>
<p> const content = document.querySelector('#sit_info');</p>
<p> const sit_buy = document.querySelector('#sit_buy');</p>
<p> const sub_tab = document.querySelector('#sub_tab');</p>
<p> const footer = document.querySelector('#ft');</p>
<p> </p>
<p> // sit_buy의 높이 구함 (fixed일 경우 하단 겹침 방지용)</p>
<p> const sitBuyHeight = sit_buy.offsetHeight;</p>
<p> const contentTop = content.getBoundingClientRect().top + window.scrollY;</p>
<p> const footerTop = footer.getBoundingClientRect().top + window.scrollY;</p>
<p> </p>
<p> window.addEventListener('scroll', function(){</p>
<p> const scrollY = window.scrollY;</p>
<p> const limit = footerTop - sitBuyHeight - 100; // footer에 닿기 전 여유 주기</p>
<p> if (scrollY >= contentTop && scrollY < limit) {</p>
<p> sit_buy.classList.add('fixed');</p>
<p> sit_buy.classList.remove('rock');</p>
<p> } else if (scrollY > limit) {</p>
<p> sit_buy.classList.remove('fixed');</p>
<p> sit_buy.classList.add('rock');</p>
<p> } else {</p>
<p> sit_buy.classList.remove('fixed');</p>
<p> sit_buy.classList.remove('rock'); </p>
<p> }</p>
<p> $(".detail_view").on("click", function(){</p>
<p> $("#sit_inf_explan").toggleClass("ori");</p>
<p> });</p>
<p>})</p>
<p></script></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
마르스컴퍼니
Expert
5개월 전
버튼 클릭 시 콘텐츠 높이 변경 후에 위치 계산을 다시 해야한다고 합니다.
<script>
$(function(){
// 버튼 클릭 시 콘텐츠 확장 후 위치 재계산하는 핵심 코드
$(".detail_view").click(function(){
$("#sit_inf_explan").toggleClass("ori");
setTimeout(recalculate, 100); // 콘텐츠 변경 후 위치 재계산
});
// 위치 계산 및 적용 함수
function recalculate() {
const buyHeight = $('#sit_buy').outerHeight();
const contentTop = $('#sit_info').offset().top;
const footerTop = $('#ft').offset().top;
const scrollTop = $(window).scrollTop();
// 현재 스크롤 위치에 따라 클래스 적용
if(scrollTop >= contentTop && scrollTop < footerTop - buyHeight - 100) {
$('#sit_buy').addClass('fixed').removeClass('rock');
} else if(scrollTop >= footerTop - buyHeight - 100) {
$('#sit_buy').removeClass('fixed').addClass('rock');
} else {
$('#sit_buy').removeClass('fixed rock');
}
}
// 스크롤, 리사이즈, 로드 시에도 계산 적용
$(window).on('scroll resize load', recalculate);
});
</script>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
굼떠
5개월 전
정말 감사합니다!
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인