[CSS] 메뉴 상단에 고정하기 (sticky)

스크롤을 내려도

헤더가 상단에 고정되어 있게 만들어봅시다.

 

 

---

 

1. 구현 모습 확인

 

 

 

①  구현 화면

예시 영상을 가져왔습니다.

 

위의 영상처럼

스크롤을 내려도 헤더가

고정되어 있게 구현할 것입니다.

 

-

 

반응형

 

 

---

 

2. position: sticky

 

header{ position: sticky; }

 

①  sticky

방법은 간단합니다.

<header> 태그에 sticky만 넣어주시면 됩니다.

 

[position:sticky;] 입니다.

 

 

320x100

 

---

 

header{
   position:sticky;
   top:0;
}

 

②  top 설정

혹시 sticky를 넣었는데 여전히

헤더가 상단에 있지 않고 올라가나요?

 

중요한 것이 하나 남았습니다.

바로 위치를 설정해 주는 것입니다.

 

다른 position 속성과 마찬가지로

top 위치를 설정해 주시면

그 위치에 붙어있습니다.

 

주로 [top:0;]을 사용합니다.

 

---

 

 

 

 

③ 코드로 보기

코드팬을 이용해 구현해 두었습니다.

실제로 적용해 보세요~!

 

예전에는 이 기능을 구현하려면

자바스크립트를 사용해야 했으나

이제는 css로도 구현이 가능합니다.

 

앞으로도 더 많은 기능이 업데이트되면 좋겠네요.

css 힘내! 지지 마!

 

https://ssimplay.github.io/

references

 

레퍼런스를 모아두는 사이트에서

더 많은 웹개발 코드 레퍼런스를 확인하실 수 있습니다.

 

 

https://developer.mozilla.org/pt-BR/docs/Web/CSS/position

position - CSS | MDN

 

자세한 호환성은 위의 링크에서 확인해 주세요.

 

---

 

3. 냐울당

 

http://mmoori.com/

멍무리를 소개합니다.

 

①  실제 적용 사이트 보기

위의 예시로 나왔던

멍무리 소개 사이트에서

실제 구현된 모습을 확인해 보세요.

 

 

 

---

 

냐울당 작가님의 작품을 구경하고 할인 쿠폰 받으세요!
https://idus.kr/FUqi5

냐울당

 

②  아이디어스

아이디어스에서

멍무리 굿즈를 판매하고 있습니다.

많은 관심 부탁드려요~

 

 

 

---

이상으로  메뉴 상단에 고정하기였습니다.

도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.

 

 

[같이 보면 좋은 포스팅]

[coding/html + css] - [CSS] overflow 스크롤은 없지만 이미지는 넘치게 하고 싶을 때

[CSS] overflow 스크롤은 없지만 이미지는 넘치게 하고 싶을 때

 

[coding/html + css] - [css] flex 줄 바꿈

[css] flex 줄 바꿈

 

 

그럼 이만.

총총.

 

*정말 감사하지만 중복 댓글은 삭제하고 있습니다.