CSS) position: sticky;

1) position: sticky;

스크롤 영역 기준으로 배치

 

사용법

.box {
    position: sticky;
    top: 0;
}

※ 한개 이상 top, bottom, left, right의 값이 존재해야 한다.

☆ EMIT 문법
.section*8>h1{Title $} + Tab
html코드에서 사용할 수 있는 문법
-> .section이라는 태그안에 h1태그 안에 Title 이라는 단어를 입력하고 $숫자를 반복해서 출력한다. *8을 통해 8번 반복.
처음봐서 잘 모르겠다. 한번 알아봐야겠다 좋네.

1. 전체 뷰 상단 스크롤바에 붙어서 출력

html

<div class="section">
  <h1>Title 1</h1>
</div>
<div class="section">
  <h1>Title 2</h1>
</div>
<div class="section">
  <h1>Title 3</h1>
</div>
<div class="section">
  <h1>Title 4</h1>
</div>
<div class="section">
  <h1>Title 5</h1>
</div>
<div class="section">
  <h1>Title 6</h1>
</div>
<div class="section">
  <h1>Title 7</h1>
</div>
<div class="section">
  <h1>Title 8</h1>
</div>

css

.section {
  height: 200px;
  border: 4px dashed lightgray;
}
.section h1 {
  text-align: center;
  line-height: 2;
  font-size: 24px;
  font-weight: bold;
  position: sticky;
  top: 0;
}

출력결과

 

2. Container 내부의 상단 스크롤바에 붙어서 출력

html

<div class="container">
  <div class="section">
  <h1>Title 1</h1>
</div>
<div class="section">
  <h1>Title 2</h1>
</div>
<div class="section">
  <h1>Title 3</h1>
</div>
<div class="section">
  <h1>Title 4</h1>
</div>
<div class="section">
  <h1>Title 5</h1>
</div>
<div class="section">
  <h1>Title 6</h1>
</div>
<div class="section">
  <h1>Title 7</h1>
</div>
<div class="section">
  <h1>Title 8</h1>
</div>
</div>

css

.container {
  width:400px;
  height:400px;
  border: 4px solid red;
  overflow: auto;
  margin: 10px;
}
.section {
  height: 200px;
  border: 4px dashed lightgray;
}
.section h1 {
  text-align: center;
  line-height: 2;
  font-size: 24px;
  font-weight: bold;
  position: sticky;
  top: 0;
}

출력결과

※ overflow:auto;를 통해서 컨테이너 내부에서 자동으로 스크롤이 생성되도록 만들어준다.
position:sticky;는 스크롤과 밀접하게 연결되어 사용된다.