Position: Sticky; 를 잘 적용 하려면?
☑︎ Section.log
- HTML 마크업 중 메뉴바를 만들었고 스크롤을 하면 원하는 위치에 고정하고자 한다.
- 관련 MDN 검색 결과 그러한 기능을 가진
position: sticky
을 찾았다.
- 고정 속성값을 주면 해당 값의 위치에서 자동으로
fixed
속성으로 바꾸어준다.
top, right, bottom, left
속성을 줄수 있고, 위쪽 고정을 위해 top: 0px;
을 적용했다.
HTML
<body>
<div class="ul-sticky">
<div class="ul-sticky__list">
<ul>
<li>Home</li>
<li>About me</li>
<li>Favorite</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
CSS
.ul-sticky__list {
position: sticky;
}
position: sticky
을 찾았다.fixed
속성으로 바꾸어준다.top, right, bottom, left
속성을 줄수 있고, 위쪽 고정을 위해 top: 0px;
을 적용했다.HTML
<body>
<div class="ul-sticky">
<div class="ul-sticky__list">
<ul>
<li>Home</li>
<li>About me</li>
<li>Favorite</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
CSS
.ul-sticky__list {
position: sticky;
}
❔Issue
- 아무리
top: 0px;
을 주어도 메뉴바가 해당 위치에 고정이 되지 않았고 수치를 바꾸어도 동일했다.
- 해결을 위한 수많은 구글링을 통해 Sticky 왜 안되는지, 어떠한상황에서 적용되어야 하는지 검색했다.
▻ Sticky 를 적용할 HTML 태그의 부모 태그에 무조건 height
이 있어야 할것
- 상위 부모태그에 임시로 height 속성을 주었다.
CSS
.ul-sticky {
height: 500px;
}
.ul-sticky__list {
position: sticky;
top: 0px;
}
-
된다. 그런데 문제가 있다. 상위 부모태그에 height
를 준 만큼만 고정됨.
-
아래의 gif 처럼 높이 값을 준 만큼만 고정되고 그 이후엔 다음 태그와 같이 올라간다.
-
높이값을 더 주게 된 다면 이후의 컨텐츠 배열에 문제가 생김
top: 0px;
을 주어도 메뉴바가 해당 위치에 고정이 되지 않았고 수치를 바꾸어도 동일했다.▻ Sticky 를 적용할 HTML 태그의 부모 태그에 무조건
height
이 있어야 할것CSS
.ul-sticky {
height: 500px;
}
.ul-sticky__list {
position: sticky;
top: 0px;
}
된다. 그런데 문제가 있다. 상위 부모태그에 height
를 준 만큼만 고정됨.
아래의 gif 처럼 높이 값을 준 만큼만 고정되고 그 이후엔 다음 태그와 같이 올라간다.
높이값을 더 주게 된 다면 이후의 컨텐츠 배열에 문제가 생김
❕Tips
Sticky
를 사용하려면 꼭 부모태그에 height
값이 있어야 한다고 했다.
- 그렇다면 컨텐츠의 내용에 따라 자동으로 높이 속성을 가지는
<body>
태그가 생각났다.
Sticky
를 꼭 사용해야 한다면 그 부분만 <body>
아래에 놓고 CSS를 주자.
- 아주 잘되는 모습을 볼 수 있다.
HTML
<body>
<div class="ul-sticky">
<div class="ul-sticky__list">
<ul>
<li>Home</li>
<li>About me</li>
<li>Favorite</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
CSS
.ul-sticky { // body 태그 바로 아래 class
position: sticky;
top: 0px;
}
↩︎ Link
Author And Source
이 문제에 관하여(Position: Sticky; 를 잘 적용 하려면?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@sunny_afterrain/knowledge02
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Sticky
를 사용하려면 꼭 부모태그에 height
값이 있어야 한다고 했다.<body>
태그가 생각났다.Sticky
를 꼭 사용해야 한다면 그 부분만 <body>
아래에 놓고 CSS를 주자.HTML
<body>
<div class="ul-sticky">
<div class="ul-sticky__list">
<ul>
<li>Home</li>
<li>About me</li>
<li>Favorite</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
CSS
.ul-sticky { // body 태그 바로 아래 class
position: sticky;
top: 0px;
}
Author And Source
이 문제에 관하여(Position: Sticky; 를 잘 적용 하려면?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sunny_afterrain/knowledge02저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)