끈적 끈적한 입장을 받아 들일 때인 이유

사람들에게 CSS 위치에 대해 가르칠 때마다 나는 항상 position: sticky; 사용에 대해 경고했습니다.

모든 위치 값에 대한 브라우저 지원은 스티키를 제외하고 훌륭했습니다. 그래서, 많은 시간 동안 작동하지 않을 무언가를 사용하는 요점은 무엇입니까?

하지만 이제 말을 바꿨습니다! Frontend Mentor 빌드 중에 리소스 페이지에 고정 메뉴를 만드는 간단한 솔루션을 찾고 있었습니다. 메뉴를 사용하면 페이지의 범주 사이를 이동할 수 있으며 기본 헤더의 일부가 아닙니다. 요소가 스크롤될 때 뷰포트의 상단에 고정되고 컨테이너가 지나갈 때 떠나면 됩니다.

물론 그 효과를 얻기 위해 npm 패키지를 설치하는 것은 매우 쉬울 것이지만 가능한 가장 간단한 접근 방식을 사용하고 싶었습니다.

이것이 position: sticky;에서 제공하는 정확한 동작이라는 것을 알았기 때문에 현재 브라우저 지원을 살펴봐야 한다고 생각했습니다.



나쁘지 않아! 전 세계에서 사용되는 브라우저의 86% 이상이 지원position: sticky;하고 거의 모든 주요 최신 브라우저가 이를 지원합니다.

그러나 누군가가 지원하지 않는 브라우저에서 사이트를 방문하면 어떻게 될까요? 단순한! 요소가 뷰포트에 고정되지 않습니다. 대규모 혼돈이나 인터넷 중단이 없습니다. 끈적 끈적한 요소가 없습니다.

사이트의 주요 사용자는 웹 개발자(현재 및 장래)입니다. 따라서 사이트에 액세스하는 대다수의 사람들이 최신 브라우저를 통해 액세스할 것이라고 가정하는 것이 전적으로 합리적이었습니다.

나는 계속해서 그것을 사용했고, 그것은 내 얼굴에 미소를 지었다고 말해야 합니다 🙂 다음은 페이지를 아래로 스크롤할 때 뷰포트 상단에 붙어 있는 메뉴 막대입니다.



그리고 여기에서 상위 요소를 지나 스크롤할 때 고정 해제됩니다.



쉬운!

제대로 확인하고 싶다면 head over to the resources page on the site .

블로그 게시물 페이지에 고정 사이드바를 갖고 싶으십니까? 기본 마크업은 다음과 같을 수 있습니다.

<!-- parent element -->
<section> 
    <article>
        ...
    </article>

    <!-- sticky element -->
    <aside>
        ...
    </aside>
</section>

section 요소가 뷰포트 밖으로 이동하자마자 aside가 고정 해제되어 화면 밖으로 이동합니다.

따라서 다음에 저처럼 고정 사이드바나 메뉴가 필요한 경우 position: sticky; 사용을 고려하십시오.

연락 유지

연락을 유지하고 싶다면 트위터나 트위터에서 할 수 있습니다. 편하게 인사하세요! 🙂