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 > ;