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

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

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

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

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

끈적거리는 이유는 무엇입니까?

고정 위치 지정은 내비게이션을 제자리에 유지하기 위한 핵심 구성 요소입니다. 이 고정 위치 요소는 뷰포트 또는 브라우저 창 자체를 기준으로 배치됩니다. 사이트가 스크롤될 때 뷰포트가 변경되지 않기 때문에 이 고정 배치 요소는 페이지가 스크롤될 때 같은 위치에 유지됩니다.

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

주의: 중단되지 않도록 라이브 사이트에서 직접 코드를 변경해서는 안 됩니다. 무료 로컬 개발 앱인 Local은 이 튜토리얼을 안전하게 따를 수 있는 테스트 환경을 설정하는 데 도움이 됩니다.

내비게이션을 한 곳에 유지하려면 어떻게 해야 합니까?

내비게이션을 고정시키는 것은 이보다 쉬울 수 없습니다. CSS 스타일링으로 완료되었습니다. 기본적으로 다음과 같이 보입니다.

 [CSS]

.navbar-고정 상단 {

위치: 고정;

오른쪽: 0;

왼쪽: 0;

z-지수: 999;

}

[/css]

페이지 길이나 위아래로 스크롤하는 횟수에 관계없이 탐색은 페이지 상단에 "고정"됩니다. 탐색을 위한 배치를 생성하는 탐색에 .navbar-fixed-top 이라는 클래스가 추가되었습니다. 이 클래스를 nav 태그에 추가했습니다. 위치는 고정으로 설정되고 왼쪽 및 오른쪽 위치를 추가하면 배치가 정확하고 페이지의 전체 너비를 차지합니다.

이 클래스가 적용될 때마다 요소의 고정 위치가 생성된다는 점을 명심하십시오. 대부분 이 클래스는 한 번만 적용됩니다. 그렇지 않으면 동일한 위치에서 동일한 방식으로 동작하는 여러 페이지 요소가 있어 뒤죽박죽 엉망이 됩니다.

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

페이지 본문 조정

이제 내비게이션이 고정된 위치에 있기 때문에 상단에 있는 콘텐츠의 일부를 덮게 됩니다. 이에 대한 간단한 수정이 있습니다. 본문 상단에 패딩을 추가하면 페이지가 아래로 밀리므로 사용자가 페이지에 도착했을 때 상단의 콘텐츠가 헤더로 덮이지 않습니다.
CSS 파일의 본문에 여백을 추가할 수 있습니다.

 [CSS]

몸 {

패딩 탑: 75px;

}

[/css]

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

끈적끈적한 헤더를 질척이게 만들기

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

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

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

탐색을 위한 기본 CSS

두 가지 중요한 CSS 스타일을 살펴보겠습니다. 첫 번째는 스티키 내비게이션의 높이, 너비 및 고정 위치를 지정하는 .navbar-fixed-top 입니다. 아래에서 높이를 75px로 지정하는 또 다른 클래스가 추가된 것을 볼 수 있습니다. 이것은 "찌그러진" 크기입니다.

 [CSS]

.navbar-고정 상단 {
위치: 고정;
상단: 0;
왼쪽: 0;
폭: 100%;
배경: #f6f6f6;
z-지수: 999;
높이: 90px;
오버플로: 숨김;
-webkit-transition: 높이 0.3s;
-moz-전환: 높이 0.3s;
전환: 높이 0.3s;
}

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

[/css]

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

 [자바스크립트]

기능 scrollPage() {
var sy = scrollY();
if ( sy >= changeHeaderOn ) {
classie.add( 헤더, 'cbp-af-header-shrink' );
}
또 다른 {
classie.remove( 헤더, 'cbp-af-header-shrink' );
}
didScroll = 거짓;
}

[/자바스크립트]

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

CSS 고정 위치 지정 옵션

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

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

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

위치 사용: 스티커

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

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

 [CSS]

.navbar-고정 상단 {
  위치: -webkit-sticky;
  위치: 끈끈한;
  상단: 0;
}

[/css] 

고정 헤더와 뷰포트 사이에 공간이 필요하지 않았으므로 상단에서 0픽셀입니다. Codepen에서 이 예제를 볼 수 있습니다.

이러한 끈끈한 오버플로 상황에 유의하십시오.

오버플로 호환성

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

제한된 브라우저 지원

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

 [CSS]

@supports(위치:스티키){
  .머리글{
    위치: -webkit-sticky;
    위치: 끈끈한;
    상단: 0;
  }
}

[/css]

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

처음에는 복잡해 보일 수 있지만 내비게이션 틀에 박힐 이유가 없습니다. 내비게이션을 끈끈하고 질척거리게 만드는 것은 비교적 간단합니다. 몇 가지 간단한 CSS 고정 위치 지정을 사용하면 고정 웹사이트 헤더를 쉽게 만들 수 있습니다. 일부 간단한 JavaScript를 사용하면 축소된 높이로 축소하여 고정 탐색을 향상하여 사용자에게 웹 사이트 콘텐츠를 볼 수 있는 더 많은 공간을 제공할 수 있습니다.

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

Local에서 WP Engine 호스팅 사이트에 대한 고정 웹사이트 헤더를 만드세요! 여기에서 자세히 알아보고 무료로 다운로드하세요!