Gatsby 블로그 상단 메뉴바 고정시키기 /개발 블로그 제작기

 

스크롤을 내리면 상단바도 같이 올라가서 고정 시켜보려 한다.

 

CSS 의 position 속성중 fixed를 사용할 것이다

 fixed로 설정하면 부모 엘리먼트로부터 독립되어 내가 위치에 자유롭게 배치시킬 수 있게 되고

브라우저 화면을 스크롤 해도 영향을 받지 않는다.

 

우선 styled를 import 해주고

import styled from "styled-components"

 

스타일을 지정할 컴포넌트를 만들고 position 속성을 추가한다

const HeaderStyle = styled.header`
  position: fixed;
`;

 

내가 원하는 위치까지 설정을 해주고

상단 메뉴바를 지금 만든 컴포넌트로 만들어주면 

스크롤을 내려도 상단 메뉴바는 고정되어있는것을 확인할 수 있다.

import * as React from "react"
import { Link } from "gatsby"
import styled from "styled-components"


const HeaderStyle = styled.header`
  position: fixed;
  top: 0;  
  width: 100%;
  background-color: #d3d3d3;
  z-index: 2;
`;

const HeaderTitleBox = styled.div`
  max-width: 960;
  padding: 1.5rem 3rem;
`;

const HeaderTitle = styled(Link)`
  font-size: 2.2rem;
  font-weight: bold;
`;

const Header = ({ siteTitle }) => (
  <HeaderStyle>

    <HeaderTitleBox>
      <HeaderTitle to="/">
        {siteTitle}
      </HeaderTitle>
    </HeaderTitleBox>
  </HeaderStyle>
)

export default Header