CSS 스티키 사이드바

1 개요

스티키 사이드바

사이드바 sticky

html

Copy

<style>
#navbar {
  background: #f003;
}
#main {
  display: flex;
}
#sidebar {
  align-self: flex-start;
  position: sticky;
  top: 0;
  background: #ff03;
  width: 100px;
  height: 30vh;
}
#content {
  flex: 1;
  background: #0f03;
  height: 9999px;
}
</style>

<div id='navbar'>메뉴</div>
<div id='main'>
  <div id='sidebar'>사이드바</div>
  <div id='content'>내용</div>
</div>

2 같이 보기

• 사이드바
• CSS 스티키 내비게이션드로워
• CSS position: sticky
• CSS align-self: flex-start

3 참고

• https://stackoverflow.com/questions/44446671/my-position-sticky-element-isnt-sticky-when-using-flexbox