적응형 pc) header요소 fixed인 경우 가로 스크롤

안녕하세요 찐망고입니다.

아.. 정말 매일매일 포스팅하시는 분 리스펙

바쁘니까 바로 본론에 들어가서

 

 

적응형 사이트를 만들다보면 pc와 mobile사이트를 따로 작업하게 되는데,

pc의 해상도 기준을 최소 1366정도 잡거든요..

그 이하 해상도에선 가로스크롤이 생기게요~

 

학생포트폴리오 - ob맥주 리뉴얼 사이트

 

문제는 header가 position: fixed인 경우 width길이만큼 고정이 되어버린다는 거죠~

 

학생포트폴리오 - ob맥주 리뉴얼 사이트

 

가로 스크롤을 이동해도 헤더는 움직이지 않습니다 

저걸 무시하고 마크업 하는 분들도 있고,

움직이게는 했는데 전체 메뉴가 보이지 않게 셋팅한 사이트들도 많더라구요

 

학생포트폴리오 - ob맥주 리뉴얼 사이트

 

이렇게 가로스크롤을 해도 nav가 제대로 보이는 게  좋겠죠?

 

// HTML

<header>
	<div class="header-in">
    	<h1>제목</h1>
        <nav></nav>
    </div>
</header>

// CSS

header {
    position: fixed;
    width: 100%;
    z-index: 99;
}
.header-in {
    position: relative;
    left: 0;
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
}

// JS

window.addEventListener('scroll', () => {
	const bwLeft = window.scrollX;
	document.querySelector('.header-in').style.left = `-${bwLeft}px`;
  });

 

다양한 방법이 있지만 

.header-in에 스크롤 이동한 값만큼 left값으로 받아 받은 값 만큼 이동하는 걸로 작업해 보았습니다.

개인적으로는 transform: translateX값으로 받는걸 더 추천해요

 

아래글을 읽으면 더 이해가 쉬울 거에요

https://ykss.netlify.app/translation/ten_tips_for_better_css_transitions_and_animations/

(번역) 더 나은 CSS 트랜지션 및 애니매이션을 위한 10가지 팁

9번글을 참고하세요

CSS transition

// CSS

header {
    position: fixed;
    width: 100%;
    z-index: 99;
}
.header-in {
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    transform: translateX(0);
}

// JS

window.addEventListener('scroll', () => {
	const bwLeft = window.scrollX;
	document.querySelector('.header-in').style.transform = `translateX(-${bwLeft}px)`;
  });