CSS - Position: Sticky; 를 잘 적용 하려면?

비 온 뒤 맑음🌞·2022년 1월 26일
CSSKnowledge
0

CSS

목록 보기
1/1
post-thumbnail
post-custom-banner

☑︎ 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;
}



❔Issue

  • 아무리 top: 0px; 을 주어도 메뉴바가 해당 위치에 고정이 되지 않았고 수치를 바꾸어도 동일했다.


  • 해결을 위한 수많은 구글링을 통해 Sticky 왜 안되는지, 어떠한상황에서 적용되어야 하는지 검색했다.
    ▻ Sticky 를 적용할 HTML 태그의 부모 태그에 무조건 height 이 있어야 할것
  • 상위 부모태그에 임시로 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

profile
비 온 뒤 맑음🌞
I want to become a developer
post-custom-banner

0개의 댓글