CSS] position: sticky로 메뉴바 고정시키기!

 

 

 

 

 

 

 

 

오늘도 개발을 하던 중 측면에 넣어둔 카카오톡 상담하기 및

nav bar 상단으로 이동하는
메뉴바를 특정 스크롤까지 내렸을 때,

고정되어 따라 내려오는 기능을 하고 싶었다.
(원래는 특정 스크롤까지 내려오면 출력되게 해 놨음)

 

 

 

 

Goo글링을 하고 열심히 했지만, 정확한 설명이 안돼서 찾지 못하다가

Sticky라는 기능을 찾았다!
그것에 대해 정리해보려고 한다!
(짧으니 쓰윽보면편하다!)

 

 

 

 

 

 

 

 

 

 

1. position: sticky란?

position: sticky는 특정 요소가 스크롤 중에 지정된 위치에 도달하면 그 자리에서 고정되는 CSS 속성이다.

일반적인 상대적 위치와 고정된 위치의 혼합형으로, 스크롤하다가 고정될 자리를 정할 수 있는 것이 특징이다.

 

 

 

 

 

 

(나는 Styled-in-component를 적용 중이라, 아예 내가 사용한 코드를 가져왔다.)

import React from "react";
import styled from "styled-components";

// Sticky 컴포넌트 스타일 정의
const StickyHeader = styled.h2`
  position: sticky;
  top: 20px;
  background-color: #f7f7f7;
  padding: 10px;
  z-index: 100;
  box-shadow: 0 4px 2px -2px gray;
`;

const Container = styled.div`
  height: 1500px; /* 스크롤이 생기도록 긴 높이 설정 */
  padding: 20px;
`;

const StickyComponent = () => {
  return (
    <Container>
      <StickyHeader>
      <KakaoChat/>
      <ScrollUpBtn/>
      
      </StickyHeader>
    </Container>
  );
};

export default StickyComponent;

 

 

 

2. 코드 설명

 

 

(위 예시에서는 두 가지 컴포넌트를 styled-components로 만들었다)

 

 

• StickyHeader: position: sticky 속성과 함께 top: 20px을 지정해, 화면 상단에서 20px 떨어진 위치에 고정되게 했다. z-index로 다른 요소 위에 배치되도록 설정하고, 고정 상태일 때 시각적으로 구분되도록 box-shadow를 추가했다.
• Container: 충분한 스크롤이 발생하도록 height를 1500px로 설정했다. 이로 인해 StickyHeader가 스크롤 중에 고정되는 모습을 확인할 수 있다.

 

 

 

 

 

 

짧은 결론!

 

 

position: sticky는 UX를 향상하는 데 도움이 되는 아주 유용한 CSS 속성이다.

 다음 프로젝트에서 스크롤할 때 특정 요소를 고정시키고 싶다면,

이 방법을 꼭 한 번 사용해 보길 바란다!