목록으로

상품 상세페이지 상세정보 펼쳐보기 버튼 추가 채택완료

굼떠

프로필 보기 이 회원 글보기 이 회원의 댓글보기

6개월 전 조회 2,241

답변 1

상품 상세보기에 이미지가 너무 커서 네이버 스마트스토어 처럼 상세보기펼쳐보기 버튼을 추가하였습니다!

기존의 상품페이지는 우측에 #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>

#그누보드5 #javascript #jquery

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

정렬:

채택된 답변

+20 포인트

마르스컴퍼니

프로필 보기 이 회원 글보기 이 회원의 댓글보기

Expert

6개월 전

버튼 클릭 시 콘텐츠 높이 변경 후에 위치 계산을 다시 해야한다고 합니다.

<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>

로그인 후 평가할 수 있습니다