상품 상세페이지 상세정보 펼쳐보기 버튼 추가
본문
상품 상세보기에 이미지가 너무 커서 네이버 스마트스토어 처럼 상세보기펼쳐보기 버튼을 추가하였습니다!
기존의 상품페이지는 우측에 #sit_buy 가 컨텐츠 높이에 도달하였을 경우 fixed가 되고 푸터에 닿을 때 fixed를 해제하게 되어있었는데
상세보기펼쳐보기 버튼을 달고 나니 페이지가 로드되었던 높이를 그대로 가지고 있어 전체 상세보기가 나올 경우에 늘어나는 스크롤을 계산할 수 없어 초기 높이에 #sit_buy fixed가 해제되어 버리는데 상세보기 펼쳐보기 버튼 클릭 시에 컨텐츠의 높이를 다시 계산 하도록 하는 방법이 있을까요?
<script>
$(document).ready(function(){
const content = document.querySelector('#sit_info');
const sit_buy = document.querySelector('#sit_buy');
const sub_tab = document.querySelector('#sub_tab');
const footer = document.querySelector('#ft');
// sit_buy의 높이 구함 (fixed일 경우 하단 겹침 방지용)
const sitBuyHeight = sit_buy.offsetHeight;
const contentTop = content.getBoundingClientRect().top + window.scrollY;
const footerTop = footer.getBoundingClientRect().top + window.scrollY;
window.addEventListener('scroll', function(){
const scrollY = window.scrollY;
const limit = footerTop - sitBuyHeight - 100; // footer에 닿기 전 여유 주기
if (scrollY >= contentTop && scrollY < limit) {
sit_buy.classList.add('fixed');
sit_buy.classList.remove('rock');
} else if (scrollY > limit) {
sit_buy.classList.remove('fixed');
sit_buy.classList.add('rock');
} else {
sit_buy.classList.remove('fixed');
sit_buy.classList.remove('rock');
}
$(".detail_view").on("click", function(){
$("#sit_inf_explan").toggleClass("ori");
});
})
</script>
답변 1
버튼 클릭 시 콘텐츠 높이 변경 후에 위치 계산을 다시 해야한다고 합니다.
<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>
정말 감사합니다!
답변을 작성하시기 전에 로그인 해주세요.