Download do react stickynode - react stickynode Baixar Código Fonte

react stickynode

Dados do site

v5.0.1

Baixar

react-stickynode

Um componente de reação de desempenho e reação abrangente.

Um componente pegajoso envolve um alvo pegajoso e mantém o alvo na viewport enquanto o usuário rola a página. A maioria dos componentes pegajosos lida com o caso em que o alvo pegajoso é mais curto que a viewport, mas não o caso em que um alvo pegajoso é mais alto que a viewport. O motivo é que o comportamento e a implementação esperados são muito mais complicados.

react-stickynode lida não apenas em caso regular, mas também o capa de destino pegajoso de uma maneira natural. No caso regular, ao rolar a página para baixo, react-stickynode permanece na parte superior da viewport. Mas, no caso de um alvo mais alto, ele rolará junto com a página até que seu fundo chegue à parte inferior da viewport. Em outras palavras, parece que o fundo da viewport puxa o fundo de um alvo pegajoso para baixo ao rolar a página para baixo. Por outro lado, ao rolar a página para cima, a parte superior da viewport puxa a parte superior de um alvo pegajoso para cima.

Esse comportamento fornece o conteúdo em um alvo alto e pegajoso mais uma chance de ser mostrado. Isso é especialmente bom para o caso em que muitos anúncios estão no trilho certo.

Outro destaque é que o react-stickynode pode lidar com o caso em que um alvo pegajoso usa porcentagem como sua unidade de largura. Para uma página de design responsivo, é especialmente útil.

Características

Recupere scrollTop apenas uma vez para todos os componentes pegajosos.
Ouça a rolagem acelerada para ter melhor desempenho.
Use RAF para atualizar o status aderente para ter melhor desempenho.
Suporte a deslocamento superior da parte superior da tela.
Suporte o limite inferior para interromper o status pegajoso.
Apoie qualquer alvo pegajoso com várias unidades de largura.

Uso

npm install react-stickynode

O Sticky usa os recursos Modernizr csstransforms3d e prefixed (Link) para detectar o IE8/9, para que possa fazer o downgrade para não usar o 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 > ;

Adereços

Nome	Tipo	Observação
`enabled`	Booleano	A mudança para ativar ou desativar o pegajoso (true por padrão).
`top`	Número/string	O deslocamento da parte superior da janela onde a parte superior do elemento será quando o estado pegajoso for acionado (0 por padrão). Se for um seletor para um destino (via `querySelector()` ), o deslocamento será a altura do alvo.
`bottomBoundary`	Número/string	O deslocamento da parte superior do documento, que o estado de liberação será acionado quando a parte inferior do elemento atingir. Se for um seletor para um destino (via `querySelector()` ), o deslocamento será a parte inferior do destino.
`innerZ`	Número/string	Index z do pegajoso.
`enableTransforms`	Booleano	Habilite o uso de transformadas CSS3 (true por padrão).
`activeClass`	Corda	Nome da classe a ser aplicado ao elemento quando o estado pegajoso estiver ativo ( `active` por padrão).
`innerClass`	Corda	Nome da classe a ser aplicado ao elemento interno ( `''` por padrão).
`innerActiveClass`	Corda	Nome da classe a ser aplicado ao elemento interno quando o estado adesivo está ativo ( `''` por padrão).
`className`	Corda	Nome da classe a ser aplicado ao elemento independente do estado pegajoso.
`releasedClass`	Corda	Nome da classe a ser aplicado ao elemento quando o estado pegajoso é liberado ( `released` por padrão).
`onStateChange`	Função	Retorno de chamada para quando o estado pegajoso mudar. Veja abaixo.
`shouldFreeze`	Função	Retorno de chamada para indicar quando o plug -in adesivo deve congelar a posição e ignorar os eventos de rolagem/redimensionar. Veja abaixo.

Manuseio de mudança de estado

Você pode ser notificado quando o estado do componente pegajoso mudar passando um retorno de chamada para o suporte onStateChange . O retorno de chamada receberá um objeto no formato {status: CURRENT_STATUS} , com CURRENT_STATUS sendo um número inteiro representando o status:

Valor	Nome	Observação
`0`	`STATUS_ORIGINAL`	O status padrão, localizado na posição original.
`1`	`STATUS_RELEASED`	O status liberado, localizado em algum lugar no documento, mas não padrão.
`2`	`STATUS_FIXED`	O status pegajoso, localizado fixado na parte superior ou na parte inferior da tela.

Você pode acessar os status como constantes estáticas a serem usadas para comparação.

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

Também Sticky as funções infantis:

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

Congelando

Você pode fornecer uma função no Prop shouldFreeze , que informará ao componente para parar temporariamente de atualização durante as alterações de suporte e estado, além de ignorar os eventos de rolagem e redimensionar. Essa função deve retornar um booleano indicando se o componente deve estar congelado no momento.