Tailwind CSS 고정 및 스크롤 가능 섹션

나는 내 결혼식 웹사이트에서 일했고(자세한 내용은 나중에) 여러분과 공유하고 싶은 이 멋진 효과를 발견했습니다.

왼쪽이 고정되어 항상 표시되고 오른쪽이 스크롤 가능한 영역이 있는 콘텐츠 측면인 섹션화된 웹 사이트를 가질 수 있습니다.

최종 결과는 다음과 같습니다.



모바일에서는 모두 뷰포트 높이 영역으로 스택되어야 합니다. 이를 달성할 수 있는 방법을 설명하겠습니다.

Tailwind CSS 고정 섹션

고정 섹션을 만드는 것으로 시작하겠습니다. 데스크탑이나 모바일에서 보게 될 자연스러운 첫 번째 요소입니다.

빌드하기 전에 두 부분을 위한 더 큰 컨테이너 래퍼가 필요합니다.

이것은 relative 클래스가 있는 div일 수 있습니다.

<div class="relative">
  <!-- fixed section -->
  <!-- scrollable sections -->
</div>

거기에서 두 섹션을 모두 만들 것이므로 고정 섹션을 추가하여 시작하겠습니다.

<div class="relative md:fixed w-full md:w-7/12 min-h-screen inset-0"></div>

처음 로드할 때 상대 요소로 가지고 있습니다. 이것은 모바일 레이아웃을 위한 것입니다.
중간 크기의 장치에서는 요소를 고정시킵니다. 이것이 자신의 위치에 충실하게 만드는 것입니다.
그런 다음 모바일에서는 전체 너비, 중형 기기에서는 7/12 열이어야 한다고 말합니다.
높이는 화면의 높이이며, inset-0 클래스를 사용하여 양쪽으로 설정합니다.

그것으로 래퍼가 있습니다. 거기에서 이미지 위에 이미지와 텍스트를 추가합니다.

<h1 class="absolute bottom-0 left-0 p-20 text-white text-8xl">Benny<br />The Pup</h1>
<img src="http://img.com" class="object-cover w-full h-full" />

텍스트는 이미지와 겹치도록 절대적으로 배치됩니다. 래퍼 하단에 정렬합니다.
그런 다음 이미지의 경우 object-cover를 사용하여 전체 요소에 걸쳐 있도록 합니다.

이제 스크롤 가능한 섹션에 대한 고정 부분이 완료되었습니다.

Tailwind CSS 스크롤 가능 섹션

스크롤 가능한 섹션은 relative 컨테이너 내부에도 있습니다.

<div class="w-full md:w-5/12 ml-auto">
  <div class="bg-red-200 h-screen flex justify-center items-center flex-col">
    <h2 class="text-4xl mb-5">Meet Benny</h2>
    <p class="mb-5">I was born 20 May 2020</p>
  </div>
  <!-- repeat above -->
</div>

이것은 또한 모바일에서는 전체 너비이고 중간 장치에서는 5/12 열입니다. 중간 장치의 화면에서 오른쪽으로 오프셋하기 위해 ml-auto를 추가했습니다.

그 안에 섹션을 정의할 수 있습니다.
스크롤 가능한 요소를 보여주기 위해 배경색이 있는 간단한 100vh 섹션을 사용하고 있습니다.
이렇게 하면 h-screen 클래스를 추가하여 요소를 화면의 정확한 높이로 만듭니다.
그런 다음 flex를 사용하여 모든 것을 내부 중앙에 배치합니다.

이제 이 섹션을 간단히 복사하여 붙여넣고 약간 다르게 보이게 할 수 있습니다.

데모

이 기사가 마음에 들었고 이 놀라운 레이아웃 옵션의 잠재력을 볼 수 있기를 바랍니다.

확실히 그랬고 우리 웨딩 웹 사이트를 주시하십시오 🤩.

Codepen에서 데모를 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나