고정 웹 사이트 헤더를 만드는 방법

게시 됨: 2018-10-14

사용자가 스크롤할 때 제자리에 유지되는 웹사이트 헤더는 매우 인기 있는 디자인 요소가 되었습니다. 이를 통해 사용자는 다른 페이지나 옵션을 선택할 때마다 위로 스크롤할 필요 없이 탐색에 쉽게 액세스할 수 있습니다.

이 기능이 있는 요소는 사용자가 웹 사이트를 이동할 때 고정되어 계속 표시되기 때문에 종종 "고정"이라고 합니다. 사용자가 웹사이트에 처음 도착하면 요소는 시작 위치에 있지만 고정 헤더는 같은 위치에 유지됩니다.

탐색은 웹 사이트의 가장 중요한 요소 중 하나이므로 이 접근 방식을 사용하면 탐색에 더 쉽게 접근할 수 있습니다. 탐색이 제자리에 있으면 사용자가 웹 사이트 콘텐츠를 이동할 때 쉽게 이동할 수 있으며 이는 매우 중요합니다.

“고정 탐색 요소는 사람들이 웹사이트를 이동할 때 쉬운 사용자 흐름을 만드는 데 도움이 됩니다. "

무엇이 그것을 끈적하게 만드는가?

고정 위치는 탐색이 제자리에 유지되도록 하는 핵심 구성 요소입니다. 이 고정 위치 요소는 뷰포트 또는 브라우저 창 자체를 기준으로 배치됩니다. 사이트가 스크롤될 때 뷰포트가 변경되지 않기 때문에 이 고정된 위치 요소는 페이지가 스크롤될 때 동일한 위치에 유지됩니다.

참고: 라이브 사이트에서 시도하지 마십시오.

기억하세요: 손상되지 않도록 사이트에서 직접 코드를 변경해서는 안 됩니다. 무료 로컬 개발 앱인 Local은 이 튜토리얼을 안전하게 따를 수 있는 테스트 환경을 설정하는 데 도움이 될 것입니다.

탐색을 한 곳에 유지하려면 어떻게 해야 합니까?

탐색을 고정적으로 만드는 것은 이보다 쉬울 수 없습니다. CSS 스타일 지정으로 완료되었습니다. 기본적으로 다음과 같습니다.

.navbar-fixed-top {

position: fixed;

right: 0;

left: 0;

z-index: 999;

}

페이지의 길이나 위아래로 스크롤한 횟수에 관계없이 탐색 메뉴는 페이지 상단에 "고정"됩니다. .navbar-fixed-top 이라는 클래스가 탐색에 대한 배치를 생성하는 탐색에 추가되었습니다. 이 클래스를 nav 태그에 추가했습니다. 위치는 고정으로 설정되고 왼쪽 및 오른쪽 위치를 추가하면 위치가 정확하고 페이지의 전체 너비를 차지합니다.
이 클래스가 적용될 때마다 요소의 고정 위치가 생성된다는 점을 명심하십시오. 대부분의 경우 이 클래스는 한 번만 적용됩니다. 그렇지 않으면 동일한 위치에서 동일한 방식으로 작동하는 여러 페이지 요소가 있어 뒤죽박죽이 됩니다.

또 다른 중요한 고려 사항은 z-인덱스입니다. 탐색이 항상 표시되기를 원하기 때문에 다른 요소와 겹치지 않도록 해야 합니다. z-index 를 참조할 때 특정 요소의 스택 순서를 설정하는 CSS 속성에 대해 이야기하고 있습니다. 스택 순서가 더 큰 요소는 항상 스택 순서가 낮은 다른 요소 앞에 있습니다. 999라는 값은 큰 숫자이므로 탐색에 안전한 베팅입니다.

페이지 본문 조정

탐색이 이제 고정된 위치에 있기 때문에 맨 위에 있는 콘텐츠의 일부를 덮을 것입니다. 이에 대한 간단한 수정 사항이 있습니다. 본문 상단에 패딩을 추가하면 페이지가 아래로 내려가므로 사용자가 페이지에 도착했을 때 상단의 콘텐츠가 헤더로 덮이지 않습니다.
CSS 파일의 본문에 패딩을 추가할 수 있습니다.

body {

padding-top: 75px;

}

고정 헤더의 두께에 따라 패딩이 더 크거나 작을 수 있습니다.

고정 사이트 헤더에서 판매되지 않습니까? 사이트에 고정 뒤로 가기 버튼을 추가하는 방법을 알아보세요.

스티키 헤더를 지저분하게 만들기

사용자가 특정 지점을 지나 스크롤할 때 가늘어지는 헤더를 찾는 것이 일반적입니다. 탐색 크기가 줄어들면 사용자에게 기본 웹 사이트 콘텐츠를 볼 수 있는 더 많은 공간을 제공하는 데 도움이 됩니다. 이것은 소형 장치에서 특히 유용합니다. 이를 위해 CSS와 JavaScript의 조합을 사용할 것입니다.

AnimatedHeader 스크립트를 사용한 Squishy 탐색

스크롤할 때 크기가 변경되는 애니메이션 헤더를 추가하려면 탐색을 부자연스럽게 만드는 훌륭하고 가벼운 솔루션이 있습니다. AnimatedHeader라고 합니다. MIT 라이선스가 있으므로 개인 또는 상업용 프로젝트에 사용할 수 있습니다. 이 파일을 얻으려면 GitHub에서 AnimatedHeader를 확인하십시오.

탐색을 위한 기본 CSS

두 가지 중요한 CSS 스타일을 살펴보겠습니다. 첫 번째 항목은 .navbar-fixed-top 으로, 고정 탐색에 대한 높이, 너비 및 고정 위치를 지정하는 것으로 보입니다. 아래에서 높이를 75px로 지정하는 또 다른 클래스가 추가된 것을 볼 수 있습니다. 이것은 "뭉쳐진" 크기입니다.

.navbar-fixed-top {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f6f6f6;
z-index: 999;
height: 90px;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}

.navbar-fixed-top.cbp-af-header-shrink {
height: 75px;
}

크기를 변경하기 위해 JavaScript를 사용하여 .cpb-af-header-shrink 클래스를 추가합니다. 이를 발생시키는 스크립트 부분을 살펴보겠습니다.

function scrollPage() {
var sy = scrollY();
if ( sy &amp;amp;amp;amp;amp;gt;= changeHeaderOn ) {
classie.add( header, 'cbp-af-header-shrink' );
}
else {
classie.remove( header, 'cbp-af-header-shrink' );
}
didScroll = false;
}

스크립트에 더 많은 내용이 있으므로 모든 구성 요소가 포함되도록 소스 코드를 다운로드해야 합니다. 보시다시피 사용자가 특정 지점을 스크롤한 후 .cpb-af-header-shrink 클래스가 추가됩니다. 사용자가 페이지를 위로 스크롤하면 이 클래스가 제거됩니다.

CSS 고정 위치 옵션

번거로움을 덜 수 있는 옵션도 있습니다. 디자인하려는 브라우저 지원에 따라 position: sticky; 스티키 헤더를 매우 간단하게 만듭니다. 브라우저 지원은 끔찍하지 않지만 완전히 글로벌하지도 않습니다. 고정 선언이 있는 경우 접두사를 사용할 수 있습니다. 자세한 내용은 사용할 수 있는지 확인하십시오.

스티키 포지셔닝을 설명하는 간단한 방법은 상대 포지셔닝과 고정 포지셔닝의 조합이라는 것입니다. 나는 당신이 스티키 포지셔닝을 꽤 많이 접했다고 생각합니다. 여기에서 헤더에 대해 이야기하고 있지만 사용자가 스크롤할 때 "고정"하려는 모든 UI 요소에도 유용합니다. 그들은 요소가 뷰포트의 가장자리에서 특정 거리에 도달하면 "고착"되는 것을 봅니다.

요소는 특정 지점에 도달한 다음 "고정"될 때까지 상대적 위치로 처리됩니다. 이 점은 CSS를 사용하여 선언됩니다. "점"은 기본적으로 절대 위치 지정에서와 같이 위, 아래, 왼쪽 또는 오른쪽을 지정할 때입니다. 요소가 "고정"할 수 있도록 지정해야 합니다.

사용 위치: 끈끈한

사용 방법은 매우 간단합니다. 몇 가지 CSS 선언과 고정 헤더를 가질 수 있었습니다. 다음은 세 가지 간단한 단계입니다.

position:sticky; ( position: -webkit-sticky; 와 같은 브라우저 접두사를 잊지 마세요.)
"고정"할 항목의 "끈적끈한 가장자리"(위쪽, 오른쪽, 아래쪽 또는 왼쪽)를 선택합니다.
"sticky edge"로부터의 거리를 선언하십시오. 즉, 스크롤 영역에서 10px 떨어져 있을 때 고정되는 헤더의 경우 10px입니다.

.navbar-fixed-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

고정 헤더와 뷰포트 사이에 공간을 원하지 않았기 때문에 상단에서 0픽셀 떨어져 있습니다. Codepen에서 이 예제를 볼 수 있습니다.

주의해야 할 끈적한 오버플로 상황

오버플로 호환성

훌륭하지만 완벽하지는 않습니다. 몇 가지 제한 사항이 있습니다. 오버플로는 때때로 약간 예측할 수 없습니다. position: sticky 가 필요한 상위 요소에서 특정 유형의 오버플로를 피하는 것이 가장 좋습니다. 오버플로 자동, 스크롤 또는 숨김에 문제가 있을 수 있습니다.

제한된 브라우저 지원

브라우저 지원은 제한되어 있으므로 현재 브라우저가 고정 위치 지정을 지원하는지 감지하기 위해 supports 규칙을 사용하는 것이 옵션입니다. 다음과 같습니다.

@supports(position:sticky){
  .header{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}

스티키 포지셔닝이 절대적으로 필요한지 생각하는 것이 중요합니다. 그렇다면 고정 위치 접근 방식을 사용할 수 있습니다. 절대적으로 필요하지 않거나 브라우저 지원이 문제가 아닌 경우 고정 접근 방식을 구현하는 것이 더 쉽습니다.

처음에는 복잡해 보일 수 있지만 탐색 경로에 갇힐 이유가 없습니다. 탐색을 끈적거리고 지저분하게 만드는 것은 비교적 간단합니다. 몇 가지 간단한 CSS 고정 위치 지정을 사용하면 끈적 끈적한 웹 사이트 헤더를 쉽게 만들 수 있습니다. 몇 가지 간단한 JavaScript를 사용하여 고정 탐색을 개선하여 사용자에게 웹 사이트 콘텐츠를 볼 수 있는 더 많은 공간을 제공할 수 있습니다.

라이브 사이트에서 이것을 시도하지 마십시오.

사이트가 로컬에 있는 동안 고정 웹사이트 헤더를 만드세요! 여기에서 자세히 알아보고 무료로 다운로드하세요!

이 기사는 원래 2016년 2월 2일에 게시되었습니다. 마지막 업데이트는 2018년 10월 14일입니다.