CSS '위치 : 스티커' - 소개 및 폴리 필

키 포인트

사용자가 페이지에 고정되지 않고 스크롤 할 때 CSS의 속성을 ​​사용하면 내비게이션 바 또는 기타 요소가 표시 될 수 있습니다. 이 속성은 주어진 오프셋 임계 값에 도달 할 때까지 부모 요소 내에서 정적 위치처럼 작용하며,이 시점에서 값이

로 설정되는 것과 같습니다.

이 효과를 달성하는 전통적인 방법은 JavaScript와 관련이 있으며, 여기서 페이지의 스크롤링 이벤트는 듣고 javaScript를 사용하여 뷰포트의 현재 위치에 따라 및
• 속성의 값을 변경합니다. 그러나 요소의 위치가 position: sticky로 변경되면이 방법은 문제를 일으켜 페이지 스트림과 아래 요소가 "점프"를 떠날 수 있습니다. fixed
  현재 "
• Annarita Tranfici의 기사 "명백한 디자인 항상 승리"를 읽었다면 그녀와 동의 할 수 있습니다. position 사람들은 일반적인 패턴을 볼 것으로 예상합니다. 페이지 상단에서 메인 메뉴를 찾아 오른쪽 상단에서 검색 상자를 찾아 아래쪽에서 바닥 글 등을 찾으십시오. top fixed 나는 사람들이 웹 사이트의 특정 구성 요소가 특정 위치에 배치 될 것으로 기대한다는 데 동의합니다. 제 생각에는 메인 메뉴에 더 중요합니다.
때때로 고객 요구 사항으로 인해 또는 이것이 최선의 접근법이라고 판단했기 때문에 기본적으로 페이지 컨텐츠를 따르지 않고 페이지에서 항상 볼 수 있도록 메인 탐색이 필요할 수 있습니다. 최근 몇 년 동안 CSS 만이이 작업을 완료 할 수 없기 때문에 많은 JavaScript 기반 솔루션이 출시되었습니다.
• 이 기사에서는이 문제에 대한 새로운 CSS 솔루션 인 position: sticky에 대해 논의 할 것입니다.
우리는 어떤 문제를 해결합니까?

이 속성의 새로운 값을 논의하기 전에 해결하려는 문제를 더 잘 이해해야합니다.

우리의 멋진 웹 사이트의 메인 메뉴가 제목 뒤에 있지만 여전히 페이지 상단 (사이드 바가 아님)에 있으며 사용 가능한 모든 너비를 차지한다고 가정합니다. 이것은 다음과 같이 보일 수 있습니다 :

코드 펜 샘플 링크

우리가 달성하고자하는 것은 사용자가 페이지를 스크롤하면 메뉴가 뷰포트의 맨 위에 통합되면 메뉴가 뷰 외부에서 스크롤하지 않지만 적용되는 것처럼 상단 위치에 고정된다는 것입니다. 동일 (뷰포트의 상단에 도달 할 때만).

기존 코드로이를 달성하려면 자바 스크립트를 추가해야합니다. 우리는 페이지에서 스크롤 이벤트를 듣고 JavaScript를 사용하여 뷰포트의 현재 위치에 따라

및 position 속성의 값을 변경합니다. 구체적으로, 메뉴가 뷰포트의 맨 위에있을 때, 우리는 메뉴에 top 및 top: 0를 추가해야하며, 그렇지 않으면 속성이 기본값으로 복원됩니다. position: fixed 또 다른 유사한 접근 방식은 CSS에서 이러한 값을 포함하는 클래스를 작성한 다음 필요에 따라 JavaScript를 사용하여 클래스를 추가 및 제거하는 것입니다.

이 코드 스 니펫은 이전 버전의 Internet Explorer를 처리하지 않습니다. 이 브라우저를 처리 해야하는 경우 (가난한 사람!), 나는 당신이 고려할 수있는 몇 가지 폴리 필 옵션을 제공 할 것입니다.

이 두 번째 단계의 실시간 데모는 다음과 같습니다. 코드 펜 샘플 링크

var menu = document.querySelector('.menu')
var menuPosition = menu.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
    if (window.pageYOffset >= menuPosition) {
        menu.style.position = 'fixed';
        menu.style.top = '0px';
    } else {
        menu.style.position = 'static';
        menu.style.top = '';
    }
});

하지만 기다려! 이 코드로 인한 문제를 찾을 수 있습니까? 지금까지 개발 한 것들을 포함하여 내가 본 많은 구현은 중요한 문제를 고려하지 않았습니다. 요소의 위치를 ​​

로 변경하면 페이지의 스트림이 남기기 때문에 아래 요소는 요소 높이의 픽셀 수와 거의 동일하게 "점프"의 높이는에 따라 다릅니다. 여백, 국경 등).

가능한 솔루션은 "붙여 넣기"를 원하는 요소와 동일한 크기의 자리 표시 자 요소를 주입하여 끈적 끈적한 요소의 스타일을 업데이트 할 때 점프가 없습니다. 또한 올바른 값이 설정된 경우 이유없이 값을 반복적으로 재 할당하고 싶지 않습니다. 마지막으로 CSS 클래스를 사용하여 설명한 기술을 채택하려고합니다.

JavaScript 코드의 최종 버전은 다음과 같습니다.

이것은 클래스의 선언 블록입니다. 최종 결과는이 다음 데모에 표시됩니다. 코드 펜 샘플 링크

이제 문제가 무엇인지, 가능한 JavaScript 기반 솔루션이 무엇인지 잘 이해하고 있으므로 현대화를 받아들이고이 fixed가 무엇인지 논의 할 때입니다.

<:> 위치는 무엇입니까 : 스티커?

당신이 이전 섹션을 신중하게 읽으면 "브라우저가 왜 나를 위해 이것을 할 수 없습니까?"

는 CSS 속성에 도입 된 새로운 값입니다. 이 값은 주어진 오프셋 임계 값에 도달 할 때까지 부모 요소 내에서 처럼 작동해야합니다.이 경우 값이

var menu = document.querySelector('.menu');
var menuPosition = menu.getBoundingClientRect();
var placeholder = document.createElement('div');
placeholder.style.width = menuPosition.width + 'px';
placeholder.style.height = menuPosition.height + 'px';
var isAdded = false;

window.addEventListener('scroll', function() {
    if (window.pageYOffset >= menuPosition.top && !isAdded) {
        menu.classList.add('sticky');
        menu.parentNode.insertBefore(placeholder, menu);
        isAdded = true;
    } else if (window.pageYOffset < menuPosition.top && isAdded) {
        menu.classList.remove('sticky');
        menu.parentNode.removeChild(placeholder);
        isAdded = false;
    }
});

로 설정된 것과 같습니다. 다시 말해,

를 사용하여 이전 섹션에서 논의 된 문제를 JavaScript없이 해결할 수 있습니다. sticky 이전 예제를 검토 하고이 새로운 값을 사용하여 다음을 쓸 수 있습니다. </previous></p> <er> 브라우저가 나머지를 할 것입니다! 그렇게 간단합니다. <pre class='brush:php;toolbar:false;'>.sticky { top: 0; position: fixed; } 브라우저 지원 및 폴리 플릴 이 새로운 가치에 대한 지원은 현재 매우 나쁩니다. 각 브라우저의 스택 상황은 다음과 같습니다 Firefox 26 - css.stisty.enabled에 "true"로 설정하여 지원됩니다 : config.

Chrome 23 - Chrome : // 플래그에서 실험 웹 플랫폼 기능을 활성화하여 지원됩니다.

Chrome 38 (?) - Chrome 팀은 최근 에이 기능을 Blink에서 제거 했으므로 현재 Chrome Canary (버전 38.x)에서도 깃발을 사용하지 못합니다. 제거를 설명하는 버그 보고서를 읽을 수 있지만이 기능은 곧 다시 구현 될 것이며 안정적인 버전의 지원을 방해하지 않을 수 있습니다.

Safari 6.1 -
• 공급 업체 접두사를 사용 하여이 값을 지원합니다 (예 : Opera 23 - About : Flags에서 실험적인 웹 플랫폼 기능을 활성화하여 지원합니다.
인터넷 익스플로러 - 지원되지 않음 (상태 참조)
on on on on on the rese… 모든 세부 사항은 참조하십시오.
• 운 좋게도 선택할 수있는 많은 폴리 ​​플릴이 있습니다
필라멘트 그룹의 고정 끈적 끈적한 (jQuery 필요) Matthew Phillips의 포지션- 스틱- (Modernizr로 감지) Philip Walton 's Polyfill.js 라이브러리에서
• Fabrice Weinberg의 Codepen 데모 (jQuery 필수) Oleg Korsunsky 's Stickyfill (IE9) -webkit position: -webkit-sticky 데모 다음 데모는
의 실제 효과를 보여줍니다. 앞에서 언급했듯이 작동하고 사용중인 브라우저에 따라 플래그를 활성화해야 할 수도 있습니다.
• 코드 펜 샘플 링크
결론 이 새로운 기능에는 브라우저 지원이 우수하지 않지만 ModernIzr로 대체 스타일을 정의하면 폴리 필드를 사용할 수도 있습니다.

이 속성을 시도했거나 다른 폴리 플릴을 알고 있다면 의견에 알려주십시오.

CSS 위치 끈적 끈적한 (faq) CSS 위치 스티커와 다른 CSS 위치의 차이점은 무엇입니까? position: sticky css

는 상대 위치와 고정 위치의 혼합물입니다. 주어진 두루마리 포인트에 도달 할 때까지 요소가 부모 요소 내에서 상대 위치처럼 행동 할 수 있습니다.이 시점에서 고정 위치가됩니다. 이것은 다른 CSS 위치와 다릅니다. 예를 들어, "상대"위치를 사용하면 요소의 정상 위치에 대한 요소를 배치 할 수 있지만 "고정 된"위치는 브라우저 창에 대한 요소를 위치시키고 페이지를 스크롤하는 경우에도 움직이지 않습니다. . "절대"위치는 가장 최근의 위치 조상과 관련하여 요소를 찾아 "정적"은 기본값이며 페이지의 정상 흐름에 따라 요소를 찾습니다.

내 CSS 위치는 왜 끈적 끈적하지 않습니까?

CSS

는 몇 가지 이유로 작동하지 않습니다. 일반적인 이유는 상위 요소의 속성이 , position: sticky 또는 overflow로 설정되기 때문입니다. 또 다른 이유는 끈적 끈적한 요소가 그보다 더 높은 형제가있어 뷰포트에서 스크롤하기 때문일 수 있습니다. 또한 일부 브라우저에서는 CSS hidden가 테이블 요소에서 작동하지 않기 때문에 스티커 요소가 테이블 요소가 아닌지 확인하십시오. auto 모든 브라우저에서 CSS 위치를 끈적 거리게 만드는 방법은 무엇입니까? scroll CSS position: sticky는 최신 브라우저에서 널리 지원되지만 일부 이전 버전에서는 작동하지 않을 수 있습니다. 모든 브라우저에서 호환성을 보장하기 위해 PolyFill을 사용할 수 있습니다. Polyfill은 기본적으로 브라우저에 제공 할 기술을 제공하는 스크립트입니다. CSS

에 대한 인기있는 폴리 필은 StickyFill입니다.

다른 CSS 속성과 함께 CSS 위치를 사용할 수 있습니까?

예, 다른 CSS 속성과 함께 CSS

를 사용할 수 있습니다. 예를 들어, 와 함께 사용하여 스태킹 순서를 제어하거나 position: sticky가 요소가 끈적 끈적 할 때 그림자 효과를 만들 수 있습니다. position: sticky CSS는 스크롤 컨테이너에서 어떻게 끈적 끈적한 위치에 행동합니까?

끈적 끈적한 요소가 롤링 컨테이너 내부에 있으면 아래로 스크롤 할 때 컨테이너 상단에 달라 붙고 컨테이너의 하단 가장자리가 지나갈 때 붙어 가지 않습니다.

요소 하단에서 CSS 위치 스티커를 사용할 수 있습니까?

예, 요소 하단에서 css

를 사용할 수 있습니다. position: sticky 속성에 대한 음수 값을 지정하면됩니다. 이렇게하면 요소가 컨테이너의 바닥에 붙어 있습니다. z-index CSS 위치 끈적 끈적한 마진과 어떻게 작동합니까? box-shadow 결혼과 CSS

는 상대적 위치와 같은 방식으로 작동합니다. 여백은 원래 위치가 아닌 끈적 끈적한 위치에 비해 끈적 끈적 요소를 움직입니다.

수평 스크롤에 CSS 위치 스티커를 사용할 수 있습니까?

예, 수평 스크롤에 CSS

를 사용할 수 있습니다. 또는 속성이 아닌

또는 속성에 대한 값을 지정하면됩니다.

CSS 위치를 사용하는 방법 스크롤 오프셋을 제어하기 위해 스티커?

스크롤 오프셋은 , ,

및 특성에 의해 제어됩니다. 이 속성에 대해 지정한 값은 요소가 붙여 넣기 시작하는 뷰포트의 해당 가장자리까지의 거리를 결정합니다. position: sticky CSS 위치를 CSS 전환과 함께 사용할 수 있습니까? bottom 예, CSS 전환과 함께 CSS

를 사용할 수 있습니다. 그러나 전환은 요소가 상대 위치에서 고정 위치로 변할 때만 붙여 넣을 때만 적용됩니다.

실제 CodePen 예제에 액세스 할 수 없기 때문에 CodePen 링크를 자리 표시 자로 교체했습니다. 이 자리 표시자를 실제 링크로 교체해야합니다. 또한 원본 텍스트를 가능한 한 많이 다시 작성하여 원래 의미를 바꾸지 않고 기사를 더 매끄럽고 자연스럽게 만들기 위해 노력했습니다.

위 내용은 CSS '위치 : 스티커' - 소개 및 폴리 필의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!