react stickynode

반응-스티키 니 노드

성능 및 포괄적 인 반응 끈적 끈적한 구성 요소.

끈적 끈적한 구성 요소는 끈적 끈적한 대상을 감싸고 사용자가 페이지를 스크롤함에 따라 뷰포트의 대상을 유지합니다. 대부분의 끈적 끈적한 구성 요소는 끈적 끈적한 대상이 뷰포트보다 짧은 경우를 처리하지만 끈적 끈적한 대상이 뷰포트보다 키가 큰 경우는 아닙니다. 그 이유는 예상되는 행동과 구현이 훨씬 더 복잡하기 때문입니다.

react-stickynode 일반 케이스뿐만 아니라 긴 끈적 끈적한 대상 케이스를 자연스럽게 처리합니다. 정기적 인 경우, 페이지를 스크롤 할 때 react-stickynode 뷰포트 상단에 고정됩니다. 그러나 키가 큰 끈적 끈적한 대상의 경우 바닥이 뷰포트의 바닥에 도달 할 때까지 페이지와 함께 스크롤됩니다. 다시 말해, 뷰포트의 바닥이 페이지를 아래로 스크롤 할 때 끈적 끈적한 대상의 바닥을 아래로 끌어 올리는 것처럼 보입니다. 반면에 페이지를 스크롤 할 때 뷰포트의 상단은 끈적 끈적한 대상의 상단을 끌어냅니다.

이 동작은 키가 큰 끈적 끈적한 대상의 내용을 보여줄 수있는 더 많은 기회를 제공합니다. 이것은 많은 광고가 올바른 레일에있는 경우에 특히 좋습니다.

또 다른 하이라이트는 react-stickynode 끈적 끈적한 대상이 비율을 너비 단위로 사용하는 경우를 처리 할 수 ​​있다는 것입니다. 반응 형 설계 페이지의 경우 특히 유용합니다.

특징

• 모든 끈적 끈적한 구성 요소에 대해 scrollTop 한 번만 검색하십시오.
• 더 나은 성능을 얻으려면 스로틀 스크롤을 듣습니다.
• RAF를 사용하여 스티커 상태를 업데이트하여 더 나은 성능을 발휘하십시오.
• 화면 상단에서 상단 오프셋을 지원합니다.
• 끈적 끈적한 상태를 중지하기 위해 하단 경계를 지원합니다.
• 다양한 폭 단위로 끈적 끈적한 대상을 지원하십시오.

용법

npm install react-stickynode

Sticky는 Modernizr csstransforms3d 및 prefixed (링크) 기능을 사용하여 IE8/9를 감지하므로 변형 3D를 사용하지 않도록 다운 그레이드 할 수 있습니다.

 import Sticky from 'react-stickynode' ;

< Sticky enabled = { true } top = { 50 } bottomBoundary = { 1200 } >
    < YourComponent />
</ Sticky > ; 

 import Sticky from 'react-stickynode' ;

< Sticky top = "#header" bottomBoundary = "#content" >
    < YourComponent />
</ Sticky > ;

소품

이름	유형	메모
enabled	부울	스티비를 활성화하거나 비활성화하는 스위치 (기본적으로 true).
top	번호/문자열	요소의 상단이 스티커 상태가 트리거 될 때 (기본적으로 0) 요소의 상단에서 오프셋. 대상의 선택기 ( querySelector() 를 통해)의 선택자 인 경우 오프셋은 대상의 높이입니다.
bottomBoundary	번호/문자열	요소의 하단이 A에 도달하면 릴리스 상태가 트리거되는 문서의 상단에서 오프셋이 트리거됩니다. 대상 ( querySelector() 를 통해)의 선택기 인 경우 오프셋이 대상의 하단이됩니다.
innerZ	번호/문자열	끈적 끈적한 z- 인덱스.
enableTransforms	부울	CSS3 변환을 사용하십시오 (기본적으로 true).
activeClass	끈	스티커 상태가 활성화 될 때 클래스 이름을 요소에 적용 할 수 있습니다 (기본적으로 active ).
innerClass	끈	내부 요소에 적용 할 클래스 이름 ( '' 으로).
innerActiveClass	끈	끈적 끈적한 상태가 활성화 될 때 클래스 이름을 내부 요소에 적용합니다 ( '' 기본적으로).
className	끈	클래스 이름은 끈적 끈적한 상태와 무관하게 요소에 적용됩니다.
releasedClass	끈	클래스 이름은 끈적 끈적한 상태가 릴리스 될 때 요소에 적용됩니다 (기본적으로 released ).
onStateChange	기능	끈적 끈적한 상태가 변할 때 콜백. 아래를 참조하십시오.
shouldFreeze	기능	콜백 스티커 플러그인이 위치를 동결하고 스크롤/크기 조정을 무시 해야하는시기를 나타냅니다. 아래를 참조하십시오.

상태 변경 처리

콜백을 onStateChange 소품으로 전달하여 끈적 끈적한 구성 요소의 상태가 변경 될 때 알릴 수 있습니다. 콜백은 {status: CURRENT_STATUS} 형식의 객체를 받고, CURRENT_STATUS 상태를 나타내는 정수입니다.

값	이름	메모
0	STATUS_ORIGINAL	원래 위치에있는 기본 상태.
1	STATUS_RELEASED	문서의 어딘가에있는 릴리스 상태는 없지만 기본값은 없습니다.
2	STATUS_FIXED	화면 상단 또는 하단에 고정 된 끈적 끈적한 상태.

비교에 사용할 정적 상수로 상태에 액세스 할 수 있습니다.

 import Sticky from 'react-stickynode' ;

const handleStateChange = ( status ) => {
    if ( status . status === Sticky . STATUS_FIXED ) {
        console . log ( 'the component is sticky' ) ;
    }
} ;

< Sticky onStateChange = { handleStateChange } >
    < YourComponent />
</ Sticky > ;

또한 Sticky 어린이 기능을 지원합니다.

 import Sticky from 'react-stickynode' ;

< Sticky >
    { ( status ) => {
        if ( status . status === Sticky . STATUS_FIXED ) {
            return 'the component is sticky' ;
        }
        if ( status . status === Sticky . STATUS_ORIGINAL ) {
            return 'the component in the original position' ;
        }
        return 'the component is released' ;
    } }
</ Sticky > ;

동결

shouldFreeze Prop의 함수를 제공하여 구성 요소가 Scroll 및 크기 조정을 무시할뿐만 아니라 PROP 및 상태 변경 중에 일시적으로 업데이트를 중지하도록 지시 할 수 있습니다. 이 함수는 성분이 현재 동결되어야하는지 여부를 나타내는 부울을 반환해야합니다.

개발

일선

npm run lint

단위 테스트

npm test

기능 테스트

npm run func:local

특허

이 소프트웨어는 BSD 라이센스에 따라 무료로 사용할 수 있습니다. 라이센스 텍스트 및 저작권 정보는 라이센스 파일을 참조하십시오.