css full reload 문제가 발생하여 질문드립니다!
/* /모바일버전 */ @media (max-width: 768px) { /*html { scroll-behavior: smooth; }*/ /* Entire Layout */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; } /* Header */ header { transition: 0.5s; /* 네비게이션을 hiring이 가리지 않게 */ z-index: 1; } header.active { background-color: #fff; border-bottom: 1px solid #eee; } .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: -270px; width: 250px; height: 100vh; box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); transition: 0.5s; } .gnb.active { right: 0; } .menu { line-height: 40px; margin-top: 60px; } .menu a { text-align: right; display: block; padding-right: 20px; color: #000; font-size: 20px; } /* Trigger */ .trigger { display: block; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; } .trigger span { position: absolute; height: 1px; width: 100%; background-color: #000; transition: 0.5s; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 80%; } .trigger span:nth-child(3) { top: 100%; } .trigger.active span:nth-child(1) { top: 50%; transform: rotate(45deg) } .trigger.active span:nth-child(2) { top: 50%; width: 80%; opacity: 0; } .trigger.active span:nth-child(3) { top: 50%; transform: rotate(-45deg) } /* Gototop */ .gototop { position: fixed; bottom: 20px; left: 20px; border: 1px solid #fff; width: 40px; height: 40px; border-radius: 50%; text-align: center; /* 텍스트는 정확하게 맞지만 이미지는 조정필요 */ line-height: 50px; transform: translateY(30px); opacity: 0; transition: 0.5s; } .gototop.active { opacity: 1; transform: translateY(0); } .btn-hiring { right: 20px; bottom: 20px; } } $(function(){ // Trigger $('.trigger').click(function(){ $(this).toggleClass('active') $('.gnb').toggleClass('active') }) $('section, .menu a').click(function(){ $('.gnb').removeClass('active') $('.trigger').removeClass('active') }) /* Smooth Scrolling */ $('.menu a, .gototop').click(function(e){ $.scrollTo(this.hash || 0, 900) }) // Change CSS with Scroll $(window).scroll(function(){ if($(window).scrollTop() > 50) { $('header, .gototop').addClass('active') } // if를 만족하면 else실행 else { $('header, .gototop').removeClass('active') } }) })글자수 제한으로 추가적인 코드올렸습니다!