react stickynode Скачать - react stickynode Source Code Скачать

react stickynode

Данные веб-сайта

v5.0.1

Скачать

React-Stickynode

Исполнительный и всеобъемлющий липкий компонент React.

Липкий компонент завершает липкую цель и сохраняет цель в точке зрения, когда пользователь прокручивает страницу. Большинство липких компонентов обрабатывают случай, когда липкая цель короче, чем просмотр, но не тот случай, когда липкая цель выше, чем просмотр. Причина в том, что ожидаемое поведение и реализация намного сложнее.

react-stickynode обрабатывает не только обычный случай, но и длинный липкий целевой корпус естественным образом. В обычном случае, прокручивая страницу вниз, react-stickynode будет придерживаться верхней части просмотра. Но в случае более высокой липкой цели он прокрутится вместе со страницей, пока ее дно не достигнет нижней части видового порта. Другими словами, похоже, что нижняя часть просмотра сжимает нижнюю часть липкой цели при прокрутке страницы вниз. С другой стороны, при прокрутке страницы вверх верхушка просмотра подтягивает верхнюю цель вверх.

Такое поведение дает контенту в высокой липкой цели больше шансов быть показанным. Это особенно хорошо для случая, когда многие объявления находятся в правильном рельсе.

Еще один из них состоит в том, что react-stickynode может обрабатывать случай, когда липкая цель использует процент в качестве блок ширины. Для отзывчивой страницы это особенно полезно.

Функции

Получите scrollTop только один раз для всех липких компонентов.
Слушайте дроссельную прокрутку, чтобы иметь лучшую производительность.
Используйте RAF, чтобы обновить статус липкой, чтобы иметь лучшую производительность.
Поддержка верхнего смещения из верхней части экрана.
Поддержка нижней границы, чтобы остановить статус.
Поддержите любую липкую цель с различной шириной.

Использование

npm install react-stickynode

Sticky использует функции 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-индекс липкого.
`enableTransforms`	Логический	Включите использование преобразований CSS3 (истинно по умолчанию).
`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 , которая сообщит компоненту временно прекратить обновление во время опоры и изменений состояния, а также игнорировать прокрутки и изменение размера событий. Эта функция должна вернуть логическую, указывающую, должен ли компонент быть замороженным в настоящее время.