[CSS] 스크롤 시 함께 이동하는 사이드바

아래쪽을 기준으로 움직이게 하고 싶을 때

@media all and (min-width: 1101px) { /* 모바일 변환 직전 최대 넓이 */
    .menu-side /* 사이드바 선택자 */ {
    position: -webkit-sticky;
    position: sticky;
    align-self: flex-end;
    bottom: 0;
    }
}

 

위쪽을 기준으로 움직이게 하고 싶을 때

@media all and (min-width: 1101px) {
    .menu-side {
    position: -webkit-sticky;
    position: sticky;
    align-self: flex-start;
    top: 0;
    }
}

 

사실 이 부분은 언젠가 js로 작성하려 그랬는데, 귀찮기도 했고 우연히 괜찮은 코드를 봐서 복사해왔다.

달력 스킨을 사용한다면 위 코드를 그대로 사용하면 된다.

 

---

참고

• https://developer.mozilla.org/ko/docs/Web/CSS/position

position - CSS: Cascading Style Sheets | MDN