ํ๋ฉด ์๋จ์ nav๋ฅผ ํฌํจํ header๋ ์คํฌ๋กค์ ๋ด๋ฆฌ๋ฉด ํ๋ฉด ์๋จ์ผ๋ก ์ฌ๋ผ๊ฐ๊ฒ ํ๋ ๋ฒํผ ๋ฑ์ ์์น๊ฐ ๊ณ ์ ๋์ด ์๋ position : fixed
๊ธฐ๋ฅ์ ํํ ๋ณด์ฌ ์๊ณ ์์๋๋ฐ position : sticky
์์ฑ์ CSS ์์
์ ๋ค์ผ๋ฉฐ ์ฒ์ ์๊ฒ ๋์๋ค. ๋ฐ๋ผ์ ์ค๋์ ์ด ๋์ ์ฐจ์ด๋ฅผ ๋น๊ตํด๋ณด๋ ค๊ณ ํ๋ค.
๐ position ์์ฑ์ ์ญํ
- ๋ฌธ์ ์์์ ์์๋ฅผ ๋ฐฐ์นํ๋ ๋ฐฉ๋ฒ์ ์ ์ํ๋ค.
- ๊ธฐ๋ณธ๊ฐ์
position : static
์ผ๋ก, ์ผ๋ฐ์ ์ธ html ๋ฌธ์์ ํ๋ฆ๋๋ก ์์๋ฅผ ๋ฐฐ์นํ๋ ๋ฐฉ์์ ์๋ฏธํ๋ค.
๐ position : fixed
- ์ผ๋ฐ์ ์ธ ๋ฌธ์ ์์๊ฐ ์๋, ํ๋ฉด ๋ด ์ง์ ๋ ์์น์ ๊ณ ์ ์ํจ๋ค.
- ์คํฌ๋กค์ ๋ด๋ ค๋ ์ํ๋ ์์น์ ๊ณ ์ ๋์ด ์๋ค.
๐ position : sticky
- ์ง์ ํ ์คํฌ๋กค ์์น์ ๋๋ฌํ๊ธฐ ์ ๊น์ง๋ static ์์ฑ์ฒ๋ผ ํ๋ํ๋ค๊ฐ ๋ทฐํฌํธ ๊ธฐ์ค์ผ๋ก ์ ํด๋์ offset์ ๋ฟ์ผ๋ฉด fixed์ฒ๋ผ ๊ณ ์ ๋๋ค.
- top, bottom, left, right ์ค ํ๋๋ฅผ ํ์์ ์ผ๋ก ์ง์ ํด์ฃผ์ด์ผ ํ๋ค. (=offset)
- ์ฝํ
์ธ ๋ง๋ค ๋ค๋ฅธ ์ ๋ณด๋ฅผ ๊ณ ์ ํด์ผ ํ๋ ๊ฒฝ์ฐ ์ ์ฉํ๊ฒ ์ฌ์ฉํ ์ ์๋ ์์ฑ์ด๋ค.
- IE์์ ์ง์๋์ง ์๋ ๊ธฐ๋ฅ์ด๋ค. (caniuse ์ฌ์ดํธ)
- ๋ถ๋ชจ ํน์ ์กฐ์ ์์์ overflow ์์ฑ์ด ์ง์ ๋์ด ์์ผ๋ฉด sticky ์์ฑ์ด ์๋ํ์ง ์์ผ๋ offset์ ์ง์ ํด์ผ ํ๋ ๊ฒ๊ณผ ๋๋ถ์ด ์ ์ํด์ ์ฌ์ฉํด์ผ ํ๋ค!