react stickynode下載 - react stickynode源代碼下載

react stickynode

網站數據

v5.0.1

下載

反應刺激性

表演者和全面的反應粘性組件。

粘性組件包裹一個粘性目標，並在用戶滾動頁面時將目標保留在視口中。大多數粘性組件都處理粘性目標比視口短的情況，但粘性目標比視口更高的情況。原因是預期的行為和實施要復雜得多。

react-stickynode不僅可以自然地處理常規案例，而且可以用自然的方式處理長粘性目標。在常規情況下，將頁面向下滾動時， react-stickynode會粘在視口的頂部。但是，在一個較高的粘性目標的情況下，它將與頁面一起滾動，直到其底部到達視口的底部為止。換句話說，在向下滾動頁面時，視口的底部將粘性目標的底部向下拉下。另一方面，在向上滾動頁面時，視口的頂部將粘性目標的頂部拉起。

這種行為使內容中的內容具有更多的顯示機會。對於許多廣告在正確的軌道上，這尤其好。

另一個亮點是， react-stickynode可以處理粘性目標用作其寬度單元的情況。對於響應式設計的頁面，它特別有用。

特徵

所有粘性組件僅檢索一次scrollTop 。
聆聽節流滾動以具有更好的性能。
使用RAF更新粘性狀態以具有更好的性能。
從屏幕頂部支撐頂部偏移。
支持底部邊界以停止粘性狀態。
支持具有各種寬度單元的任何粘性目標。

用法

npm install react-stickynode

粘性使用Modernizr csstransforms3d和prefixed （鏈接）功能來檢測IE8/9，因此可以降級不使用Transform3D。

 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`	布爾	開關啟用或禁用粘性（默認情況下）。
`top`	數字/字符串	觸發粘性狀態時元素頂部的窗口頂部的偏移（默認為0）。如果它是目標的選擇器（通過`querySelector()` ），則偏移將是目標的高度。
`bottomBoundary`	數字/字符串	當元素底部到達時，將觸發釋放狀態的偏移量。如果它是目標的選擇器（通過`querySelector()` ），則偏移將是目標的底部。
`innerZ`	數字/字符串	Z-INDEX的粘性。
`enableTransforms`	布爾	啟用CSS3轉換的使用（默認情況下為true）。
`activeClass`	細繩	當粘性狀態處於活動狀態時，要應用於元素的類名稱（默認為`active` ）。
`innerClass`	細繩	班級名稱要應用於內部元素（ `''` '。
`innerActiveClass`	細繩	當粘性狀態處於活動狀態時，要應用於內部元素的類名稱（ `''` '）。
`className`	細繩	班級名稱要應用於獨立於粘性狀態的元素。
`releasedClass`	細繩	發布粘性狀態時要應用於元素的類名稱（默認`released` ）。
`onStateChange`	功能	何時粘性狀態更改。見下文。
`shouldFreeze`	功能	回調以指示粘性插件何時應凍結位置並忽略滾動/調整大小的事件。見下文。

處理狀態變化

當粘性組件的狀態通過將回調傳遞到onStateChange Prop時，您可以通知您。回調將以格式接收一個對象{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 > ;