💡깨달음💡/CSS

position: sticky 사용시 주의

과부하가즈아 2024. 6. 25. 15:55

position: sticky사용시 주의할 것

 

만들고자 한 header

✔️두개의 영역으로 나누어 만들기

✔️스크롤하면 second-header가 상단에 고정되는 ui를 만들고 싶었다.

 

🧐그래서 <header>안에 div로 영역을 두개로 나누고 second-header에 position: sticky를 부여해주었는데 원하는대로 적용이 되지 않고 스크롤시 그대로 밀려나오도라,,!

<body>
  <div class="wrap">
    <header>
      <div class="first-header"></div>
      <div class="second-header"></div>
    </header>
...
...
/* Default Style*/
body {
  font-family: "Pretendard", sans-serif;
  height: 100%;
  background-color: $color-white;
  color: $color-black;
}
a {
  color: $color-black;
}
.wrap {
  min-width: 1280px;
  height: auto;
  overflow: auto;
  /* ########## Header ########## */
  header {
    .first-header{
      padding-top: 25px;
      height: 80px;
    }
    .second-header {
      background-color: $color-white;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      width: 100%;
      height: 80px;
      z-index: 99;
    }
    ....
  }
}

구글링을 해보니 position: sticky를 사용하기 위해서는 조건들이 좀 있었다.

 

[해당 요소]

1. 위치 값을 정해주어야 한다.(top, right, bottom, left 중 하나의 값은 무조건 필)

 

2. position: sticky 속성은 자신의 바로 위의 부모 요소 내에서만 적용된다.

[부모 요소]

1. 부모 요소들 중에서 overflow 속성이 적용된 것이 있으면 동작하지 않는다.

overflow: hidden, auto, scroll

 

2. 바로 위 부모 요소에 height가 적용되어 있는지 확인한다.(여기선 %값의 속성은 적용이 되지 않는다.)

height: 100%; /* % 속성은 적용 불가 */
height: auto; 
height: 100px;
height: 100vh;

문제로 우선 second-header을 header내부에서 나눈것이라 header이 스크롤 되면 second-header이 header에 sticky되는 것이 문제였다.

 

그래서 아쉽지만 다음과 같은 구조로 html을 변경했고, 

 

.wrap

|  header 

|  |  .first-header

|  .second-header

 

빼낸 .second-header의 부모요소인 .wrap에 있던 overflow: hidden을 없애주었다.

<body>
  <div class="wrap">
    <header>
      <div class="first-header"></div>
    </header>
    <div class="second-header"></div>
...
...
/* Default Style*/
body {
  font-family: "Pretendard", sans-serif;
  height: 100%;
  background-color: $color-white;
  color: $color-black;
}
a {
  color: $color-black;
}
.wrap {
  min-width: 1280px;
  height: auto;
  /* ########## Header ########## */
  header {
    .first-header{
      padding-top: 25px;
      height: 80px;
    }
    .second-header {
      background-color: $color-white;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      width: 100%;
      height: 80px;
      z-index: 99;
    }
    ....
  }
}

 

🫡즉, 중요했던 것은 부모요소의 스크롤시 stick가 먹히는 점 이라는 것 같다. 그래서 부모의 높이 값도 있어야 하고 overflow도 없어야 하는 것 같다. sticky를 사용할 요소의 부모를 잘 보아야겠다.