[카카오테크캠퍼스 선택과정] 애플 예제: 내비게이션

코드 보기

 

body {
  height: 3000px;
}
header {
  height: 50px;
  border-bottom: 1px solid #d2d2d2;
  position: sticky;
  top:0;
  background-color: rgba(255,255,255,0.7);
  backdrop-filter: blur(20px);
}
h1 {
  width: 100%;
  height: 400px;
  background-color: orange;
}

sticky는 부모 요소의 범위 안에서만 동작한다.