상단바 헤더(header) 고정하는 2가지 방법 sticky pixed (CSS 코드 수정) 티스토리 꾸미기

티스토리에 상단바를 고정하는 2가지 방법을 작성했습니다.

여러가지로 적용할 수 있는 코드이니 한번 따라서 적용해보시길 바랍니다.

'티스토리 HTML/CSS 편집창'과 'F12 개발자 도구'를 이용하는 방법은 계속해서 다른 글들과 겹쳐서 해당 내용 중간에 링크를 걸어 놨습니다.

1. sticky 코드 값을 이용한 상단바 고정

{
z-index: 1010; > 우선 순위 값 
background-color: rgba(255,255,255,0.95); > 배경 색상
position: sticky; > 스크롤시 따라오게 하는 값
top: 0px; > 포지션 위치 값 지정
border-bottom: 1px solid #eee; > 아래 경계선 색상 표시
}

1-1 sticky 코드 적용 결과

'sticky' 코드를 '티스토리 HTML/CSS 편집기'에 'header'의 위치를 찾고 위 코드를 넣어 봤습니다.

적용 결과 스크롤시 상단 바가 잘 따라오는 것을 확인할 수 있습니다. 위와 같이 상단바 뒤에 투명 효과를 주려면 색상 코드를 건드리면 간단하게 변경할 수 있습니다. (아래 이미지 참고)

티스토리 HTML/CSS 편집 방법 바로가기'개발자 도구' 사용방법 바로가기

2. fixed 코드 값을 이용한 상단바 고정

{
z-index: 1010; > 우선 순위 값
background-color: rgba(255,255,255,0.95); > 배경 색상
position: fixed; > 위치 고정 코드 지정
left:0px; > 포지션 위치 값 지정
top: 0px; > 포지션 위치 값 지정
width: 100%; > 넓이 지정 값
border-bottom: 1px solid #eee; > 아래 경계선 색상
}